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

时间:2024-02-21 13:52:46

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

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

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

raido的样式为:

第二步:加入背景图片

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

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

原图片为:

整体代码如下: