Heim > Web-Frontend > HTML-Tutorial > 自定义浏览器原生组件样式之radio和checkbox_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-21 08:50:02
Original
1174 Leute haben es durchsucht

有时候,我们自己定义一些公司项目内部用的组件时,会对浏览器的各种组件进行样式修改。这里主要说一下checkbox和radio组件的样式修改方式。

实现

首先看看效果:

其实现原理就是将input隐藏,然后通过label指向input,对input和其伪元素进行样式修改。

我们先看看chechbox:

html:

<input type="checkbox" id="check1" class="checkbox1" /><label for="check1"></label>
Nach dem Login kopieren

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;}
Nach dem Login kopieren

再来看看radio:

html:

<input type="radio" id="radio1" name="radio1-1" class="radio1" /><label for="radio1"></label><div class="" style="height:20px;"></div><input type="radio" id="radio2" name="radio1-1" class="radio1" /><label for="radio2">
Nach dem Login kopieren

对应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;}
Nach dem Login kopieren

完整示例

完整示例如下:

See the Pen 自定义浏览器元素组件样式 by 刘放 ( @brizer ) on CodePen .

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage