自定义浏览器原生组件样式之radio和checkbox_html/css_WEB
有时候，我们自己定义一些公司项目内部用的组件时，会对浏览器的各种组件进行样式修改。这里主要说一下checkbox和radio组件的样式修改方式。 实现
首先看看效果： 其实现原理就是将input隐藏，然后通过label指向input，对input和其伪元素进行样式修改。 我们先看看chechbox： html：
css:
.checkbox1 { display:none;}.checkbox1 + label { position:relative; padding:4px 9px; border:1px solid green; border-radius:3px;}.checkbox1:checked + label:after { position:absolute; content:'/2714'; font-size:14px; top:2px; left:3px; color:blue;} 再来看看radio： html：
对应css：
.radio1 { display:none;}.radio1 + label { position:relative; padding:6px 12px; border:1px solid red; border-radius:50%;}.radio1:checked + label:after{ position:absolute; top:6px; left:5px; content:''; width:15px; height:15px; font-size:32px; border-radius:50%; background-color:blue;} 完整示例完整示例如下： See the Pen 自定义浏览器元素组件样式 by 刘放 ( @brizer ) on CodePen . |