今天教大家一下學(xué)以致用的東西吧厕九，摸索中進(jìn)步铛碑，沒(méi)經(jīng)過(guò)美化的單選框按鈕是這樣的
image.png
那么經(jīng)過(guò)美化的呢是這樣的
image.png
想不想知道這樣的美化怎么做出來(lái)的呢藻丢？一起來(lái)看看吧犁跪！
在body里寫(xiě)上內(nèi)容
<body>
<input type="radio" id="" name="" value="1"><label for="radios1">我是radio1</label>
<input type="radio" id="" name="" value="2"><label for="radios2">我是radio2</label>
</body>
在樣式里热康，首先將原始的單選框狀態(tài)清除掉
input[type="radio"] {
position: relative;
width: 18px;
height: 18px;
outline: none;
vertical-align: bottom;
}
第二沛申、通過(guò)偽類(lèi)的方式來(lái)模擬單選框
input[type="radio"]:before {
content: "";
position: absolute;
width: 16px;
height: 16px;
border: 1px solid #999;
border-radius: 50%;
}
第三、用偽類(lèi)before來(lái)定義選中時(shí)的背景和邊框
input[type="radio"]:checked:before {
border: 1px solid transparent;
background-color: #5ECD62;
}
第四姐军、用偽類(lèi)after來(lái)定義選中時(shí)的圓圈
input[type="radio"]:checked:after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 8px;
height: 8px;
border: 2px solid #fff;
border-radius: 50%;
}
這樣美美的單選框按鈕就做出來(lái)啦熄赡！
