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

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{//點擊讓圓出現width: 9px;height: 9px;background: #01DC34;border-radius: 50%; }

js

$(".radioItem .radio").click(function(){//單選按鈕 點擊的時候讓另一個radio選中狀態為false$(this).parent().parent().parent().siblings().children().children().children('.radio').attr('checked',false);})

最終效果圖

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。