既然是自定義單選框所以要清除原生的單選框樣式

input, textarea { //清除所有input和textarea的原生樣式border: 0;-webkit-appearance: none;-moz-appearance: none; }

html5

<div class="radioBox"><div class="radioItem"><label><div class="change"><input type="radio" name="sir" class="radio"><div class="circle"></div></div><span>先生</span></label></div><div class="radioItem"><label><div class="change"><input type="radio" name="lady" class="radio"><div class="circle"></div></div><span>女士</span></label></div></div>

css代碼

.formBox .radioBox{display: flex;position: absolute;top:50%;transform: translateY(-50%);right:10px; } .radioBox .radioItem {margin-right:10px; } .radioBox .radioItem .change{position: relative;display: flex;align-items: center;justify-content: center;width: 15px;height: 15px;background: #FFFFFF;border: 1px solid #CCCCCC;border-radius: 50%;margin-right:5px; } .radioItem>label{display: flex;align-items: center;font-size: 0.347rem; } .radioItem>label>span{font-family: "SourceHanSansCN-Regular";color:#666666; } .radioBox .radioItem .change>.radio{position: absolute;width: 100%;height: 100%; } .radioBox .radioItem .radio:checked ~ .circle{//點(diǎn)擊讓圓出現(xiàn)width: 9px;height: 9px;background: #01DC34;border-radius: 50%; }

js

$(".radioItem .radio").click(function(){//單選按鈕 點(diǎn)擊的時(shí)候讓另一個(gè)radio選中狀態(tài)為false$(this).parent().parent().parent().siblings().children().children().children('.radio').attr('checked',false);})

最終效果圖

總結(jié)

以上是生活随笔為你收集整理的h5配合css和js如何自定义单选框的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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