微信二维码
微博二维码
qq号二维码

复选框样式修改到底有多简单?!1+1=2

夏磊银 2019.06.24 589人浏览
CheckBox复选框和radio单选框样式更改,利用label标签的伪元素进行修改未选中和选中的样式调整

复选框添加id,并用label标签的for与其绑定。

复选框样式修改到底有多简单?!1+1=2

第一步,先将input标签设置样式让其隐藏。

#xx{display: none;}

第二步,给相邻label标签添加伪元素

#xx+label:before{

content: "";

display: block;

width: 30px;

height: 30px;

border: 1px solid #333;

background: #fff;

}

第三步,将你需要修改的对勾样式切成图片放在img文件夹中

复选框样式修改到底有多简单?!1+1=2

第四步,添加input选中状态下,相邻的label标签的伪元素的样式发生对应的更改

#xx:checked+label:before{

background: url(img/true.jpg)no-repeat;

background-size: 100% 100%;

}

第五步,运行即可出现对应的效果

复选框样式修改到底有多简单?!1+1=2


分享到:
天津UI设计培训-CleanPNG免抠素材网站
  • 2020.11.30
  • "天津IT培训适应经济新常态:中日职场比较 - 探索工作时长减少、生活质量提升的程序员"
  • 2024.04.23