总结自定义表单样式的控件，涉及到一些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触发动作而生成。
欢迎访问我的个人网站：博客地址
