3.改变单选/复选框的默认样式——软设问题总结系列
3.1 使用单选/复选框时应注意的问题
- 单选:name属性的值应该一致,才能保证选择一个
- 复选:name属性的值不能一致
3.2 简单的大小改变
此方法在Google能正常显示,但是在火狐有时候就会失效
给input添加一个样式:zoom:数值;
- 数值>1时,单选/复选的图标(圆圈/正方形)会放大,数值越大,图标越大
- 数值<1时,图标会缩小
- 数值=1时,图标正常
正常代码如下
<input type="radio" name="sex" value="girl">女
<input type="radio" name="sex" value="boy">男
<input type="radio" name="sex" value="bg">中性人
<hr>
<input type="checkbox" name="run" value="跑步">跑步
<input type="checkbox" name="swim" value="游泳">游泳
<input type="checkbox" name="climb" value="爬山">爬山
正常效果如图:
改变大小的代码如下:
<input type="radio" name="sex" value="girl" style="zoom:2;">女
<input type="radio" name="sex" value="boy" style="zoom:1;">男
<input type="radio" name="sex" value="bg" style="zoom:0.5;">中性人
<hr>
<input type="checkbox" name="run" value="跑步" style="zoom:2;">跑步
<input type="checkbox" name="swim" value="游泳" style="zoom:1;">游泳
<input type="checkbox" name="climb" value="爬山" style="zoom:0.5;">爬山
改变大小的效果图如下:
3.3 更改默认样式
在很多时候我们会觉得默认样式与项目的整体风格不符合,就想完全更改其样式,其做法的思路如下:
- html上在每个
input
后面+上一个label
标签 -
label
设置点击文字选择选项 input
标签设置display:none;
- 利用
label::before
设置未选中时的样式 - 利用
input[type='radio']:checked+label::before
设置选中的选项
默认样式如上图所示,
html
部分:
<input type="radio" name="sex" value="girl" id="sexgirl">
<label for="sexgirl">女</label>
<input type="radio" name="sex" value="boy" id="sexboy">
<label for="sexboy">男</label>
<input type="radio" name="sex" value="bg" id="sexbg">
<label for="sexbg">中性人</label>
CSS
部分:
input[type='radio'] {
display: none; /*第3步*/
}
input[type='radio']+label {
float: left; /*设置选项与选项之间的距离*/
margin: 0 10px;
}
input[type='radio']+label::before {
content: "";
float: left; /*设置选项样式的位置*/
width: 15px; /*设置选项样式的宽高*/
height: 15px;
background-color: #fff;
border: 1px solid #000; /*设置选项样式的边框*/
border-radius: 50%; /*设置选项样式为圆圈*/
margin-right: 2px; /*设置圆圈与文字之间的距离*/
margin-top: 3px;
box-sizing: border-box;
}
input[type='radio']:checked+label::before {
background-color: brown; /*设置选项选中的颜色*/
padding: 3px; /*设置选中时颜色的区域*/
background-clip: content-box;
}
除了更改成其他的颜色和边框,也能换成图片
- 图片主要是在
label::before
的background-image
里设置 - 选中后的图片变化可以在
input[type='radio']:checked+label::before
中设置
因为没有很大的区别,在这里我就不给出详细代码了。