当前位置:Gxlcms > html代码 > 自定义浏览器原生组件样式之radio和checkbox_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:91人阅读

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

人气教程排行