纯css美化复选框、单选框、下拉列表、file文件上传器

大家都知道，实现复选框，单选框，下拉列表很简单，html里有写一两行代码就可以出效果，但是美中不足的是默认的样式很丑陋，如下。

    type="radio" id="test" name="radio"> /*单选框*/
    type="checkbox" id="test2" name="checkbox" />/*多选框*/
    "sel">/*下拉列表*/
        <option value="2011" selected="selected">2011年option>
        <option value="2012">2012年option>
        <option value="2013">2013年option>
    

原始效果图：

作为一名有追求的前端攻城狮，是绝对不能满足甚至容忍此的。
于是开始了足之舞之手之蹈之的美化之路。
Html部分：

        <form class="checkchoose" action="#"> 
            
            <div class="wrapper"">
                
checkbox-box">
                    <input name="box1" type="checkbox" id="check01" />
                    <span>√span>
                div>
                <label for="check01" style="font-size:15px;">选项一label>
            div>

            
            <div class="wrapper">
                <div class="checkbox-box">
                    <input name="box2" type="checkbox" id="check02"  />
                    <span>√span>
                div>
                <label for="check02" style="font-size:15px;">选项二label>
            div>

        form>

思路：（去掉默认样式—>外层包裹一个div，美化div—>实际上点的还是默认框）
1. 原始input 隐藏，input外面的checkbox制定长宽，以border画一个框。
2. span定位绑缚于现任框（checkbox上面），且调整√的样式，旋转；
input框还是要存在滴，只是隐藏了，当点击现任框的时候实际上还是点的这个input框，因此样式：隐藏且层级最高;
3. 用户点击交互通过span的√是否显现体现。
4. 对了，还有很重要也很容易忽视的一点。用户选择的时候不一定非要点击当前框进行选择，更人性化的考虑是可以点后面的文字即lable然后前面的框实现自动勾选。
这里能否实现呢?
哈哈，答案是肯定的。

"box2" type="checkbox" id="check02"  />
<label for="check01" style="font-size:15px;">选项一label>

这里input的id与lable的for，内容要一致，这样便可实现匹配 (●^∀^●)

css样式：

        /*所有选项联动*/
        .checkchoose {
            padding: 10px 20px;
        }   


        /*勾选框*/ 
        .checkbox-box {
            display: inline-block;
            width: 15px;
            height: 15px;
            margin-right: 10px;
            position: relative;
            border: 2px solid orangered;
            opacity: 0.6;
            vertical-align: middle;
        }   



        /*框框*/  
        .checkbox-box input {
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10;
        }

        .checkbox-box input:hover {
            cursor: pointer;
        }
        /*勾勾*/
        .checkbox-box span {
            position: absolute;
            top: -7px;
            right: 1px;
            font-size: 25px;
            font-weight: bold;
            font-family: Arial;
            -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
            /*旋转√*/
            color: orangered;
        }
        /*选项文字*/
        label {
            font-size: 20px;
            color: #000;
        }
        /*选项间的距离*/
        .wrapper {
            margin-bottom: 10px;
        }
        /*兄弟选择器 ！important*/
        .checkbox-box input[type="checkbox"]+span {
            opacity: 0;
        }

        .checkbox-box input[type="checkbox"]:checked+span {
            opacity: 1;
        }

效果图：

好了理解了这个，我们就更好理解简易的版本了：
html代码：

  
 <label>
    <input type="checkbox" checked>
    <i>✓i>
    复选框
label>

css代码：

            label {
                font-size: 25px;
                cursor: pointer;
            }

            label i {
                font-size: 20px;
                font-style: normal;
                display: inline-block;
                width: 25px;
                height: 25px;
                text-align: center;
                line-height: 20px;
                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后面加上如同checked一样的disabled、checked，然后css改成相应灰色背景即可。
同样可做出效果图：

值得一提的是：框里面的原点·或者对勾√不是单独的标签，是通过伪元素：after实现的！

在input下面同级的lable或者span添加伪元素 lable：after实现对勾√

.check_box label:after {
    content: '';
    width: 8px;
    height: 4px;
    position: absolute;
    top: 4px;
    left: 3px;
    border: 2px solid #cacaca;/*对勾实现关键代码*/
    border-top: none;/*对勾实现关键代码*/
    border-right: none;/*对勾实现关键代码*/
    opacity: 0.4;
    transform: rotate(-45deg);/*对勾实现关键代码*/
    /*border一个矩形，然后左上消失。*/
}

实现圆点就简单很多了……往下看之前先思考下你会怎么实现

---

.radio_box input:checked+label:after {
    content: '';
    width: 9px;
    height: 9px;
    position: absolute;
    top: 3px;
    left: 3px;
    background: #ef4949;
    border-radius: 50%;
}

是的就是如此easy，长宽+radius 50%

---

最后，讲解美化下拉列表
下拉列表美化就比较亲民风了，不整太复杂，就把下拉的那个箭头换掉就好（至少视觉上看来是这样），换掉还不简单？在上面盖个箭头图片就好。
默认：
美化后：

贴上代码：

html代码：
<div class="sel">
    <select name="year" id="select">
        <option value="">option>
    select>
div>

思路还是 sel外包一个div（宽度更宽，包住slec框）->sel去掉默认样式->div负责美美哒；原始负责功能；

css样式
            .sel{
                float: right;
                margin-right: 20px;
                width: 120px;
                height: 22px;
                overflow: hidden;
                /*箭头背景图*/
                background:url(dist/sel_bg.png) no-repeat 81px 1px;                                 

            }
            .sel select{
                background: transparent;/*去掉样式*/
                width: 100px;
                padding: 1px 2px; /*框里字*/
                border: 1px solid black;
                font-weight: bold;
                outline: none;
                height: 20px;
                -webkit-appearance: none;  /*去掉样式 for chrome*/
                appearance:none;/*去掉样式*/
                -moz-appearance:none;/*去掉样式*/
            }

file文件上传：

美化思路：
lable for绑定这个input，美化lable就是美化这个file,原file让他css物理性消失逻辑上仍在

<div>
    <span>附件：span>
    <input type="text" id="text" disabled="disabled" >
    <input type="file" id="file"  accept=".xlsx" >
    <label for="file">上传文件label>
div>

        #file{position: absolute;clip: rect(0,0,0,0);}
        .upload label{
            width: 80px;
            height: 34px;
            border: 1px solid #00a5e0;
            background-color: #00a5e0;
            color: #fff;
            display: inline-block;
            line-height: 34px;
            font-size: 14px;
            text-align: center;
            cursor: pointer;
            z-index: 2;
            border-radius: 4px;
        }

效果:

---

好了，美化讲完了，有兴趣的可以移步 复选框、下拉列表的js逻辑代码笔记
↓↓↓↓ O(∩_∩)O ↓↓↓↓
js获取复选框、下拉列表的信息