最近業(yè)務(wù)需求需要做一個(gè)自定義的input [type="radio"]樣式匀泊，在慕課網(wǎng)的CSS3教程中看到了相關(guān)的一個(gè)選擇器的知識(shí):checked選擇器
教程里的代碼給了我一個(gè)很方便的demo茉贡。于是我自己改造了一下拇泣，實(shí)現(xiàn)了自己想要的效果宫患。
talk is cheap，show me the code
Ok,let us do it
首先是HTML結(jié)構(gòu)
<div class="form1">
<p>工作技能:</p>
<form action="#">
<div>
<div class="box">
<input type="radio" id="best-1" name="evaluation" /><span></span>
</div>
<label for="best-1">優(yōu)秀：保證質(zhì)量咸这，高效痒蓬，而可承擔(dān)額外工作</label>
</div>
<div>
<div class="box">
<input type="radio" id="fine-1" name="evaluation" /><span></span>
</div>
<label for="fine-1">良好：能保質(zhì)保量，按時(shí)完成任務(wù)</label>
</div>
<div>
<div class="box">
<input type="radio" id="medium-1" name="evaluation" /><span></span>
</div>
<label for="medium-1">中等：可基本完成任務(wù)贪惹，無(wú)明顯亮點(diǎn)</label>
</div>
<div>
<div class="box">
<input type="radio" id="bad-1" name="evaluation" /><span></span>
</div>
<label for="bad-1">差：可基本完成任務(wù)苏章，無(wú)明顯亮點(diǎn)</label>
</div>
</div>
</form>
</div>
接下來(lái)是比較關(guān)鍵的CSS
*{margin: 0;padding: 0;}
p{
position: absolute;
line-height: 1;}
form {
display: inline-block;
margin-left: 89px;}
.box {
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
position: relative;
background: #fff;
vertical-align: middle;
border:1px solid #e4e4e7;
border-radius: 100%;}
.box input {
opacity: 0;
position: absolute;
top:-3px;
left:-4px;
width: 100%;
height:100%;
z-index:100;/*使input按鈕在span的上一層，不加點(diǎn)擊區(qū)域會(huì)出現(xiàn)不靈敏*/}
input+span {
display: block;
width: 6px;
height: 6px;
border-radius:50%;
position: absolute;
background: #1796f9;
top: 50%;
left:50%;
margin: -3px 0 0 -3px;
z-index:1;}
input[type="radio"] + span {
opacity: 0;}
input[type="radio"]:checked + span {
opacity: 1;}
話不多說(shuō)奏瞬，上圖
效果圖
