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

实现

首先看看效果：

其实现原理就是将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 .