在html的表单元素中我们可以采用下列代码生成单选框:
<label>
<input type="radio" name="radio" checked>
<span>男</span>
</label>
<label>
<input type="radio" name="radio">
<span>女</span>
</label>
该代码块实现的效果如下:
是不是与一般我们所见的单选框不太一样?有点丑,而且我们不能改变该单选框的背景颜色等等,因为它是html5默认的样式。
这里补充几个单选框的知识点:
①这里的input元素要与lable元素建立关系,实现点击lable元素中书写的内容即选中这个框的效果;
②这里第一个input元素中有布尔属性checked,实现默认选中该单选框的效果;
③要给这两个单选框加上同一个name,证明它们是一起的,避免选中多个框。
其实我们采用js插件可以实现许多漂亮的单选框,但是采用css我们也可以实现自己制作许多漂亮的单选框,大体思路:
将input元素隐藏,利用伪类选择器ckecked,选中其后的span元素
(利用伪元素选择器自己制作单选框),实现点击后有单选框的效果
下面具体说下代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单选框的美化</title>
<style>
.radio-item .radio{
width: 13px;
height: 13px;
border-radius: 50%;
background-color:gold;
display: inline-block;
}
.radio-item input:checked+.radio::after{
content: "";
width: 6px;
height: 6px;
display: block;
border-radius: 50%;
margin-left: 3.5px;
margin-top: 3.5px;
background-color: #008c8c;
}
.radio-item input{
display: none;
}
</style>
</head>
<body>
<label class="radio-item">
<input type="radio" name="radio" checked>
<span class="radio"></span>
<span>男</span>
</label>
<label class="radio-item">
<input type="radio" name="radio" checked>
<span class="radio"></span>
<span>男</span>
</label>
</body>
</html>
这是实现的效果:
这里制作的比较简陋,仅仅改变了小圆圈的颜色还有背景颜色,想要实现更多的效果也可以自己设置哦.
这里说几点注意事项:
①在input元素之后又重新创建了一个没有内容的span元素,以便于input被点击后大圆圈中间可以出现小圆圈,使用margin调节小圆圈的位置;
②行盒无法设置宽高,所以应该重新设置该元素 display:inline-block;
③新创建的span元素,应设置为块盒,否则无法设置上下margin.
美化单选框实际上就是创建出了一个新的元素,重新设置样式,把原来的单选框隐藏掉所以千万不要被事物的外在所欺骗,要透过外在看本质,富有想象力,解决问题。fighting!!!