关于如何修改input中radio的默认样式


前端中的input类标签中的radio和checkbox前面的选框的样式是不能改变的,但是这往往会造成我们在用起来时候样式的局限性,以下是改变样式的方法:隐藏默认样式,并将自己喜欢的样式作为背景图片显示;

首先:将默认样式隐藏,代码为

input[type = "radio"] {
  display: none;
}

raido的样式为:

第二步:加入背景图片

因为我的图片的大小为15乘30,所以我为背景图片留出至少15的空间即可;

设置鼠标滑过的时候,样式改变,只需要改变背景图片的定位就好,

原图片为:

整体代码如下:

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM