使用css修改checkbox选择框的样式

二. 修改思路:

  • 给原本的checkbox框加上visibility: hidden;属性,使其隐藏同时又占据原本在页面上面的位置,说直白点就是,使checkbox看不见,但是仍然占有原来的位置。

  • 然后使用绝对定位label标签覆盖到checkbox框上面,通过修改label标签达到修改checkbox框的目的。

三. 具体代码:

代码一:设置“√”为元素的内容,点击之后显示对勾
// HTML代码
同意

// CSS代码

效果一:
img_1d89f7bf7727551bfe84344a7c007898.gif
代码二:设置背景图片,点击之后,显示背景图片
// HTML代码
同意

// CSS代码

效果二:
img_8e4f9786568e4952a3df2efc5cde3f45.gif

你可能感兴趣的:(使用css修改checkbox选择框的样式)