单/复选框的默认样式的改变+写单/复选框时应注意的问题

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 更改默认样式

在很多时候我们会觉得默认样式与项目的整体风格不符合，就想完全更改其样式，其做法的思路如下：

1. html上在每个input后面+上一个label标签
2. label设置点击文字选择选项
3. input标签设置display:none;
4. 利用label::before设置未选中时的样式
5. 利用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中设置

因为没有很大的区别，在这里我就不给出详细代码了。