06/5
2017
今天做的网站上有个地方的单选按钮是这样的：
这个需要做美化，我找到了一个办法，步骤如下：
1.先把按钮隐藏，然后放一个i标签来伪装成按钮。把我们自己做的按钮图片设置为i标签的背景图。
2.按钮被隐藏起来了，怎么选中/反选按钮的状态呢？这就需要用label标签把按钮、i标签以及文字包裹起来，这样点击i标签和文字就可以设置按钮的选中状态了。
html代码如下：
<label><input type="radio" name="sex" value="男" checked><i></i> 男</label> <label><input type="radio" name="sex" value="女"><i></i> 女</label>
3.在按钮的选中状态改变后，css怎样能相应的改变图片呢？我原以为要用js来判断选中状态，不曾想css里也有对应的选择器了。
css代码如下：
input[type="radio"] {display:none;} /*隐藏按钮*/
label i { } /*设置通用样式，如宽高等*/
input[type="radio"] + i { } /*这里设置未选中时的背景图，内略*/
input[type="radio"]:checked + i { } /*这里设置选中时的背景图，内略*/
这是什么操作？我查了下，原来这是 :checked 是一个css3的伪类选择器，可以匹配每个选中的输入元素（仅适用于单选按钮或复选框）。
除此之外还有个识别禁用状态的 :disabled 伪类选择器，这次我没有使用。
+号选择器则代表相邻的元素。
Read More →
