saber酱的抱枕

哀哉京阿尼

06/5
13:58
学习

使用CSS美化表单(checkbox、radio)

今天做的网站上有个地方的单选按钮是这样的:

 使用CSS美化表单(checkbox、radio)

这个需要做美化,我找到了一个办法,步骤如下:

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 伪类选择器,这次我没有使用。

+号选择器则代表相邻的元素。

我参考的完整代码如下:

<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>选择框样式</title>  
<style>  
label {font-size:12px;cursor:pointer;}  
label i {font-size:12px;font-style:normal;display:inline-block;width:12px;height:12px;text-align:center;line-height:12px;color:#fff;vertical-align:middle;margin:-2px 2px 1px 0px;border:#2489c5 1px solid;}  
input[type="checkbox"],input[type="radio"] {display:none;}  
input[type="radio"] + i {border-radius:7px;}  
input[type="checkbox"]:checked + i,input[type="radio"]:checked + i {background:#2489c5;}  
input[type="checkbox"]:disabled + i,input[type="radio"]:disabled + i {border-color:#ccc;}  
input[type="checkbox"]:checked:disabled + i,input[type="radio"]:checked:disabled + i {background:#ccc;}  
</style>  
</head>  
<body>  
<label><input type="checkbox"><i>✓</i>复选框</label><br>  
<label><input type="checkbox" checked><i>✓</i>复选框</label><br>  
<label><input type="checkbox" disabled><i>✓</i>复选框禁用</label><br>  
<label><input type="checkbox" disabled checked><i>✓</i>复选框禁用已选</label><br>  
<label><input type="radio" name="abc"><i>✓</i>单选框</label><br>  
<label><input type="radio" name="abc" checked><i>✓</i>单选框</label><br>  
<label><input type="radio" name="abc" disabled><i>✓</i>单选框禁用</label><br>  
<label><input type="radio" name="def" disabled checked><i>✓</i>单选框禁用已选</label><br>  
</body>  
</html>  

使用CSS美化表单(checkbox、radio)