总结自定义表单样式的控件，涉及到一些css伪类伪元素知识
css组合选择符
css组合选择符在自定义表单控件中扮演着连接的作用，便于控制元素样式，css3中有四种组合选择符。
后代选择器 ：以空格分离，选择后代相匹配的元素；#div p 选择的是#div下所有的p元素
子元素选择器 ：以大于号分离，选择子元素相匹配的元素；#div>p 选择的是#div下直接子元素为p元素
相邻兄弟选择器 ：以加号分离，选择紧接的元素，二者有相同父级，#div+p选择的是#div相邻的p，只是第一个，因为第一个相邻的
后续兄弟选择器 ：以波浪线分离，选择所有相邻兄弟元素，都有相同的父级，#div~p 选择的是#div相邻的所有的p元素
伪类和伪元素
伪类 通过选择器找到不存在DOM树中的信息以及一些css选择器获得不到的信息，一般用冒号开头
常见的伪类
anchors伪类 a:link //未访问的链接 a:visited //已访问的链接 a:hover //鼠标滑过的链接 a:active //已选中的链接 ? css-伪类 :first-child //元素的第一个子元素 :last-child //元素的最后一个子元素 :nth-child(n) //元素的第n个子元素 :first-letter //常用作文本，选择元素的第一个字母 :first-line //常用作文本，选择元素的第一行 :checked //选中的表单元素，比如radio Checkbox option :disabled //禁用的表单元素 :focused //元素输入后具有焦点的元素
伪元素 在DOM树中创建一些抽象的元素，不存在与文档语言中，css为区分伪类和伪元素，伪元素为::
常见的伪元素有
::before 作为元素的第一个子节点插入DOM中 ::after 作为元素的左右一个子节点插入DOM中 //常常与content相匹配生成内容，这里content有点意思，后面详细说
label标签
此标签表示用户界面中项目的标题，是内联元素inline，通常关联表单控件，或者放入其中
//直接嵌套型 <label>click <input type=‘text‘ id=‘user‘ name=‘username‘></label> //for绑定id型 <label for=‘user‘>click</label> <input type=‘text‘ id=‘user‘ name=‘username‘>
除了绑定这些控件，还搭配选择组
optgroup
<optgroup label=‘fruit‘>
自定义控件样式的实现
主要原理：
- 隐藏原生的input控件
- 使用label，对label添加样式，使其代替原来的控件
因为，label可以关联到所指定的控件，因而既可以为label添加样式，显示出控件样子；又可以使checkbox有原来的动态(即单选、多选)
雪碧图和图标字体
雪碧图
css图像合成技术，主要用来弄小图标的，雪碧图直接合成在一张图片上；作用：减少过多的文件请求，减少http请求。
图标字体
代码部分
方法一: 利用checked和:after
HTML结构
<div id="first">
Checkbox控件<br>
<input type="checkbox" name="box" id="box1">
<label for="box1"></label>
<input type="checkbox" name="box" id="box2">
<label for="box2"></label>
<input type="checkbox" name="box" id="box3">
<label for="box3"></label><br>
radio控件<br>
<input type="radio" name="radios" id="radio1">
<label for="radio1"></label>
<input type="radio" name="radios" id="radio2">
<label for="radio2"></label>
</div>
CSS样式
//隐藏原来的input控件
#first input{
display:none;
}
/*checkbox 设置label*/
#first input[type=‘checkbox‘]+label{
width:16px;
height:16px;
display:inline-block;
border:1px solid #d9d9d9;
}
/*:checked后*/
#first input[type=‘checkbox‘]:checked+label:after{
content:‘\2714‘; /*这里的content内容有点意思，另一篇文章中再总结*/
color:red;
width:8px;
height:8px;
line-height:8px;
text-align:center;
font-size:20px;
}
/*radio 设置label*/
#first input[type=‘radio‘]+label{
width:16px;
height:16px;
display:flex; /*这里必须用flex布局,radio的label中的点才会出现*/
border:1px solid #d9d9d9;
border-radius:50%;
}
/*:checked后*/
#first input[type=‘radio‘]:checked+label::after{
border-radius: 50%;
width: 8px;
height: 8px;
line-height: 8px;
content: ‘‘;
margin:auto;
background: #d73d32;
}
/*:checked的input的边框变化*/
#first input:checked+label{
border:1px solid #d73d32;
}
方法二: 直接利用雪碧图定位获取
css样式
/*为所有的label设置宽高 背景*/
#fisrt input+label{
width: 16px;
height:16px;
border:none;
display: inline-block;
background:url(‘bg.png‘) no-repeat;
}
/*利用雪碧图定位一开始的CheckBox radio背景*/
#first input[type=‘checkbox‘]+label{
background-position:-25px -32px;
}
#first input[type=‘radio‘]+label{
background-position: -24px -10px;
}
/*利用雪碧图定位选中后的CheckBox radio背景*/
#first input[type=‘checkbox‘]:checked+label{
background-position: -60px -32px;
}
#first input[type=‘radio‘]:checked+label{
background-position: -59px -10px;
}
总结
两种方法都是通过设置label的样式代替原生的样式；前者是利用:before,:after来添加内容；后者是利用图片直接添加；这个过程都利用:checked触发动作而生成。
欢迎访问我的个人网站：博客地址
原文地址：https://www.cnblogs.com/iDouble/p/8560945.html