我們先生成單選框

<label class="radio-item"><input type="radio" name="a"><span>男</span></label><label class="radio-item"><input type="radio" name="a"><span>女</span></label>

生成的單選框是這樣的
看起來并不美觀，但是表單元素又是H5默認(rèn)樣式，沒辦法更改單選框的屬性，那么如何更改單選框樣式呢
其實(shí)有很多種方法，現(xiàn)在我們來利用CSS更改表單單選框的樣式

• 首先在input后面添加空的span樣式，然后將空的span樣式生成新的單選框，再把input單選框隱藏就行了。

<label class="radio-item"><input type="radio" name="a"><span class="radio"></span><span>男</span></label><label class="radio-item"><input type="radio" name="a"><span class="radio"></span><span>女</span></label>

添加css樣式

.radio-item .radio{//定義單選框邊框display: inline-block;width: 12px;height: 12px;border:1px solid #999;border-radius: 50%;}.radio-item input:checked+.radio{//更改單選框選中顏色border-color:#008c8c ;}.radio-item input:checked+.radio::after{//在選中單選框里面添加一個(gè)小圓心content: "";display: block;width: 6px;height: 6px;border-radius: 50%;background: #008c8c;margin-top:3px ;margin-left: 3px;}.radio-item input:checked~span{//將文字顏色變成定義顏色color: skyblue;}.radio-item input[type="radio"]{//隱藏單選框display: none;}

效果圖

總結(jié)

以上是生活随笔為你收集整理的前端CSS基础——表单元素单选框的美化的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。