cssを使用したカスタムラジオボタン

Question

カスタムラジオボタンを作成しようとしています（下の図を参照）。

は、私が正しいスタイリングを達成することができますが、ラベルはラジオボタンの前に表示させることができないとコードを書きました。

.lengend-action-buttons { 
 
    float: left; 
 
    margin-left: 10px; 
 
    margin-top: 10px; 
 
} 
 
label { 
 
    font-weight: normal; 
 
    font-size: 14px; 
 
    Font-Family: Metric-Regular; 
 
    Color: #666666; 
 
    display: block; 
 
    cursor: pointer; 
 
} 
 
[type="radio"] { 
 
    border: 0; 
 
    clip: rect(0 0 0 0); 
 
    height: 1px; 
 
    margin: -1px; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    position: absolute; 
 
    width: 1px; 
 
} 
 
[type="radio"] + span:before { 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 1.1em; 
 
    height: 1.1em; 
 
    vertical-align: -0.10em; 
 
    border-radius: 1em; 
 
    border: 0.35em solid #fff; 
 
    box-shadow: 0 0 0 0.10em #36B18D; 
 
    margin-right: 0.75em; 
 
    transition: 0.5s ease all; 
 
} 
 
[type="radio"]:checked + span:before { 
 
    background: #36B18D; 
 
    box-shadow: 0 0 0 0.10em #36B18D; 
 
} 
 
[type="radio"]:focus + span::after { 
 
    font-size: 1.2em; 
 
    line-height: 1; 
 
    vertical-align: -0.125em; 
 
}

<div class="lengend-action-buttons lengend-action-buttons-first"> 
 
    <label for="d3_graph_chart0011day"> 
 
    <input type="radio" name="date_range" id="d3_graph_chart0011day" value="1day" checked="checked"> 
 
    <span>1 Day</span> 
 
    </label> 
 
</div> 
 

 
<div class="lengend-action-buttons lengend-action-buttons-first"> 
 
    <label for="d3_graph_chart0017day"> 
 
    <input type="radio" name="date_range" id="d3_graph_chart0017day" value="7day"> 
 
    <span>7 Day</span> 
 
    </label> 
 
</div> 
 

 
<div class="lengend-action-buttons lengend-action-buttons-first"> 
 
    <label for="d3_graph_chart00130day"> 
 
    <input type="radio" name="date_range" id="d3_graph_chart00130day" value="30day"> 
 
    <span>30 Day</span> 
 
    </label> 
 
</div> 
 

 
<div class="lengend-action-buttons lengend-action-buttons-first"> 
 
    <label for="d3_graph_chart00190day"> 
 
    <input type="radio" name="date_range" id="d3_graph_chart00190day" value="901day"> 
 
    <span>90 Day</span> 
 
    </label> 
 
</div>

、私を助けてこの問題を解決してください。

Answer 1

spanためafterおよびその逆でbeforeを交換し、ええ、margin-rightとmargin-left：

.lengend-action-buttons { 
 
    float: left; 
 
    margin-left: 10px; 
 
    margin-top: 10px; 
 
} 
 
label { 
 
    font-weight: normal; 
 
    font-size: 14px; 
 
    Font-Family: Metric-Regular; 
 
    Color: #666666; 
 
    display: block; 
 
    cursor: pointer; 
 
} 
 
[type="radio"] { 
 
    border: 0; 
 
    clip: rect(0 0 0 0); 
 
    height: 1px; 
 
    margin: -1px; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    position: absolute; 
 
    width: 1px; 
 
} 
 
[type="radio"] + span:after { 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 1.1em; 
 
    height: 1.1em; 
 
    vertical-align: -0.10em; 
 
    border-radius: 1em; 
 
    border: 0.35em solid #fff; 
 
    box-shadow: 0 0 0 0.10em #36B18D; 
 
    margin-left: 0.75em; 
 
    transition: 0.5s ease all; 
 
} 
 
[type="radio"]:checked + span:after { 
 
    background: #36B18D; 
 
    box-shadow: 0 0 0 0.10em #36B18D; 
 
} 
 
[type="radio"]:focus + span::before { 
 
    font-size: 1.2em; 
 
    line-height: 1; 
 
    vertical-align: -0.125em; 
 
}

<div class="lengend-action-buttons lengend-action-buttons-first"> 
 
    <label for="d3_graph_chart0011day"> 
 
    <input type="radio" name="date_range" id="d3_graph_chart0011day" value="1day" checked="checked"> 
 
    <span>1 Day</span> 
 
    </label> 
 
</div> 
 

 
<div class="lengend-action-buttons lengend-action-buttons-first"> 
 
    <label for="d3_graph_chart0017day"> 
 
    <input type="radio" name="date_range" id="d3_graph_chart0017day" value="7day"> 
 
    <span>7 Day</span> 
 
    </label> 
 
</div> 
 

 
<div class="lengend-action-buttons lengend-action-buttons-first"> 
 
    <label for="d3_graph_chart00130day"> 
 
    <input type="radio" name="date_range" id="d3_graph_chart00130day" value="30day"> 
 
    <span>30 Day</span> 
 
    </label> 
 
</div> 
 

 
<div class="lengend-action-buttons lengend-action-buttons-first"> 
 
    <label for="d3_graph_chart00190day"> 
 
    <input type="radio" name="date_range" id="d3_graph_chart00190day" value="901day"> 
 
    <span>90 Day</span> 
 
    </label> 
 
</div>

Answer 2

テキスト真ん中整列セットを作るために:after

で:beforeを交換vertical-align 〜0123あなたの200ポイントに

.lengend-action-buttons { 
 
    float: left; 
 
    margin-left: 10px; 
 
    margin-top: 10px; 
 
} 
 
label { 
 
    font-weight: normal; 
 
    font-size: 14px; 
 
    Font-Family: Metric-Regular; 
 
    Color: #666666; 
 
    display: block; 
 
    cursor: pointer; 
 
} 
 
[type="radio"] { 
 
    border: 0; 
 
    clip: rect(0 0 0 0); 
 
    height: 1px; 
 
    margin: -1px; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    position: absolute; 
 
    width: 1px; 
 
} 
 
[type="radio"] + span:after { 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 1.1em; 
 
    height: 1.1em; 
 
    vertical-align: middle; 
 
    border-radius: 1em; 
 
    border: 0.35em solid #fff; 
 
    box-shadow: 0 0 0 0.10em #36B18D; 
 
    margin-left: 0.75em; 
 
    transition: 0.5s ease all; 
 
} 
 
[type="radio"]:checked + span:after { 
 
    background: #36B18D; 
 
    box-shadow: 0 0 0 0.10em #36B18D; 
 
} 
 
[type="radio"]:focus + span::before { 
 
    font-size: 1.2em; 
 
    line-height: 1; 
 
    vertical-align: middle; 
 
}

<div class="lengend-action-buttons lengend-action-buttons-first"> 
 
    <label for="d3_graph_chart0011day"> 
 
    <input type="radio" name="date_range" id="d3_graph_chart0011day" value="1day" checked="checked"> 
 
    <span>1 Day</span> 
 
    </label> 
 
</div> 
 

 
<div class="lengend-action-buttons lengend-action-buttons-first"> 
 
    <label for="d3_graph_chart0017day"> 
 
    <input type="radio" name="date_range" id="d3_graph_chart0017day" value="7day"> 
 
    <span>7 Day</span> 
 
    </label> 
 
</div> 
 

 
<div class="lengend-action-buttons lengend-action-buttons-first"> 
 
    <label for="d3_graph_chart00130day"> 
 
    <input type="radio" name="date_range" id="d3_graph_chart00130day" value="30day"> 
 
    <span>30 Day</span> 
 
    </label> 
 
</div> 
 

 
<div class="lengend-action-buttons lengend-action-buttons-first"> 
 
    <label for="d3_graph_chart00190day"> 
 
    <input type="radio" name="date_range" id="d3_graph_chart00190day" value="901day"> 
 
    <span>90 Day</span> 
 
    </label> 
 
</div>