自定义checkbox/radio

时间 2019-11-11

原文原文链接

一. label标签

1. 概念：

HTML <label>元素表示用户界面中项目的标题。
它一般关联一个控件，或者是将控件放置在label元素内，或者是用做其属性。这样的控制称做label元素的labeled controlcss

2. 用法：

用法1：

<label>Click me <input type="text" id="User" name="Name" /></label>

用法2：

<label for="User">Click me</label> <input type="text" id="User" name="Name" />

二. background-position属性

1. 概念：

background-position属性用来指定背景图片的初始位置；这个初始位置相对于background-origin定义的背景位置图层来讲的html

2. 用法:

background-position:[position-x]，[position-y]

若是只有一个值被指定，则这个值就会默认设置背景图片位置中的水平方向，与此同时垂直方向的默认值被设置成50%。在关键词、百分比和数值混合指定的状况下，关键词 left 和 right 只能被指定水平方向的位置（第一个值）同时 top 和 bottom 只能被指定指定为垂直方向的值（第二个值）。一样，负数值是容许指定的。ios

三. 伪类和伪元素

1.概念：

伪类：存在的意义是为了经过选择器找到那些不存在于DOM树中的信息以及不能被常规CSS选择器获取到的信息。
伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。
经常使用伪类:css3

:active 向被激活的元素添加样式。 :focus 向拥有键盘输入焦点的元素添加样式。 :hover 当鼠标悬浮在元素上方时，向元素添加样式。 :link 向未被访问的连接添加样式。 :visited 向已被访问的连接添加样式。 :first-child 向元素的第一个子元素添加样式。 :checked 向选中的控件元素添加样式

伪元素:伪元素在DOM树中建立了一些抽象元素，这些抽象元素是不存在于文档语言里的（能够理解为html源码）；
注意:css3为了区分伪类和伪元素，规定伪类前面有一个冒号，伪元素前面有两个冒号
经常使用伪元素git

::before 做为做用元素的第一个子节点插入dom中 ::after 做为做用元素的最后一个子节点插入dom中

2.区别与联系

联系：都是经过选择器为元素添加样式
区别:伪元素会建立一个元素，但不是真正的Html元素，伪类至关于为一个元素建立一个class样式
4、自定义控件的原理
隐藏原生input标签，使用label，而且给之加样式来实现自定义控件
html：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义checkbox,radio样式</title> <link rel="stylesheet" href="index.css"> </head> <body> <div id='wrap'> <h2>伪元素实现：</h2> <div class="checkbox"> <input type="checkbox" name="" id="checkBox" class="checkBox"> <label for="checkBox"></label> </div> <div class="radio"> <input type="radio" name="sex" id="radioBox" class="radios"> <label for="radioBox"></label> <input type="radio" name="sex" id="radioBox1" class="radios"> <label for="radioBox1"></label> </div> <h2>雪碧图实现：</h2> <div class="checkbox"> <input type="checkbox" name="" id="checkBox_sprit" class="checkBox_sprit"> <label for="checkBox_sprit"></label> </div> <div class="radio"> <input type="radio" name="sex1" id="radioBox_sprit" class=" radioBox_sprit"> <label for="radioBox_sprit"></label> <input type="radio" name="sex1" id="radioBox1_sprit" class=" radioBox_sprit"> <label for="radioBox1_sprit"></label> </div> </div> </body> </html>

伪元素方法实现
使用:checked伪类和::after伪元素,当控件选中时添加伪元素到label标签中：

css:github

.checkbox{ margin-bottom: 30px; font-weight: 700; } .checkBox+label,.radios+label{ width:16px; height: 16px; border:1px solid #d9d9d9; display: -webkit-flex; display:flex; } .checkBox:checked+label,.radios:checked+label{ border:1px solid #d73d32; font-weight: 700; } .checkBox:checked+label::after,.radios:checked+label::after{ margin: auto; content: '2714'; color: red; width:8px; height:8px; line-height: 8px; text-align: center; font-size: 12px; } input{ margin:0; display: none; } /* radio */ .radio{ display: -webkit-flex; display: flex; width: 50px; -webkit-justify-content: space-between; justify-content: space-between; } .radios+label{ border-radius: 50%; } .radios:checked+label::after{ border-radius: 50%; width:8px; height:8px; line-height: 8px; content: ' '; background: #d73d32; }

效果展现
 源码地址web

雪碧图实现方法:
给label加一个背景图片，并经过设置选中状态时的background-position属性
css:

.checkBox_sprit+label,.radioBox_sprit+label{ width: 16px; height:16px; border:none; display: inline-block; background:url('bg.png') no-repeat; } .checkBox_sprit+label{ background-position:-25px -32px; } .radioBox_sprit+label{ background-position: -24px -10px; } .checkBox_sprit:checked+label{ background-position: -60px -32px; } .radioBox_sprit:checked+label{ background-position: -59px -10px; }

[效果展现](效果展现
 源码地址网络

五. css雪碧图和css伪元素两种方法的比较

使用伪元素能够不用图片，这样就减小了http的收发次数，提升了网络性能。
使用css雪碧图，可使还原度更加精确，代码量减小。

自定义checkbox/radio

一. label标签

1. 概念：

2. 用法：

二. background-position属性

1. 概念：

2. 用法:

三. 伪类和伪元素

1.概念：

2.区别与联系

4、自定义控件的原理

五. css雪碧图和css伪元素两种方法的比较