這是接著上一篇純css自定義復(fù)選框checkbox的第二篇，自定義一個(gè)radio單選按鈕，同樣，采用css偽類和“+”css選擇器為思路，下面是預(yù)覽圖：

?

下面直入主題放代碼：HTML部分

<!--兩個(gè)name相同的radio--> <input type="radio" id="my_radio1" class="my_radio" name="my_radio"><label for="my_radio1">單選Radio1</label> <br /> <input type="radio" id="my_radio2" class="my_radio" name="my_radio"> <label for="my_radio2">單選Radio2</label>

HTML代碼沒(méi)什么說(shuō)的，就是普通的label和input,定義相同的name即可。

下面為CSS部分：

/*radio單選主要樣式*/ .my_radio{opacity: 0;} .my_radio+label::before {content: "";display: block;width: 16px;height: 16px;border-radius: 100%;border: 1px solid #d9d9d9;position: absolute;top: 3px;left: -24px;box-sizing: border-box; }.my_radio:hover+label::before {-webkit-transition: all .3s;transition: all .3s;border-color: #1890ff }.my_radio:checked+label::after {content: "";display: block;width: 8px;height: 8px;border-radius: 100%;background-color: #1890ff;position: absolute;top: 7px;left: -20px;border-color: #1890ff;-webkit-transition: all .3s;transition: all .3s; }

四行css，第二行為radio最外層的圓圈,第四行為radio最里面選中時(shí)的實(shí)心圓。第三行為radio hover時(shí)的效果。其他樣式自己可根據(jù)需要修改。

?

轉(zhuǎn)載于:https://www.cnblogs.com/websharehome/p/9622090.html

總結(jié)

以上是生活随笔為你收集整理的自定义常用input表单元素二：纯css实现自定义radio单选按钮的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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