自定义浏览器原生组件样式之radio和checkbox_html/css_WEB-ITnose

有时候，我们自己定义一些公司项目内部用的组件时，会对浏览器的各种组件进行样式修改。这里主要说一下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：

   


      
查看更多关于自定义浏览器原生组件样式之radio和checkbox_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did114789