替换input单选框的样式

Posted 2020-10-28 yy_68

实现效果：。

css的input单选框的样式很丑，有时候不想使用原生的样式，如上照片，可以使用下面的方法。

思路是，给inpu加visibility：hidden隐藏，然后使用不同的图片绝对定位覆盖在input上面，之后将不同的图片和input状态绑定一下。设置visibility而不用display的好处是，前者在视觉隐藏的情况下还会占据原来的空间，这样可以调整下面的input和上面的图片大小一致。

<div>
      提现方式
      <span><img src="img/xuanzhong.png"/><input name="radio" type="radio" checked="true" value="0">微信</span>
      <span><img src="img/weixuanzhong.png"/><input name="radio" type="radio" value="1">支付宝</span>
</div>

div span {
    position: relative;
    margin-left: 20px;
 }
div span input{
　　visibility:hidden;
　　height:20px;
　　width:20px;
}
div span img{
　　position:absolute;
　　top:0;
　　left:0;
　　height:20px;
　　width:20px;
　　border-radius:50%;
}

var spans = document.querySelectorAll("span");
var radios = document.querySelectorAll("input[type=\'radio\']");
var imgs = document.querySelectorAll("img");
spans.forEach(function(v, i) {
       v.onclick = function() {
          if(i == 0) {
              imgs[0].src = "xuanzhong.png";
              imgs[1].src = "weixuanzhong.png";
              radios[1].checked = "false";
              radios[0].checked = "checked";
             } else {
              imgs[0].src = "img/weixuanzhong.png";
              imgs[1].src = "img/xuanzhong.png";
              radios[0].checked = "false";
              radios[1].checked = "checked";
           }
        }
    })

这样当获取的value值等于0是表示选中的是微信，1表示选中的是支付宝。多选框也可以同理设置。 

这种方法比较麻烦，虽然可以用jquery简化代码，但是思路并不好。其实不使用单选框也可以。方法二：

<div>
      提现方式
      <span data-type="0"><img src="img/xuanzhong.png" class="display-block"/>微信</span>
      <span data-type="1"><img src="img/xuanzhong.png" class="display-none"/>支付宝</span>
</div>

.display-none{
  display:none;   
}
.display-block{
  display:block;   
}
//使用jquery操作逻辑
var $spans = $("div span");
$spans.click(function(){
　　$spans.children("img").removeClass("display-block").addClass("display-none");
　　$spans.children("img").removeClass("display-none").addClass("display-block");
　　console.log($spans.children("img.display-block").attr("data-type");)
　　　　//获取span下的含有display-block类名的img元素，取出它的data-type的值就能判断是微信还是支付宝
})

 

个人总结笔记，有误请指出，谢谢。