使用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

与after反之亦然为span，是的，margin-left替换before与margin-right：

.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到middle

.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>