纯css 多选框、单选框、下拉框美化

纯css美化单选、多选框和下拉框

由于工作用到，也网上度娘看了很多，把这几个常用的美化简单记录下
效果图:
radio、checkbox

select

radio相关

css:

.radio-beauty {
            width: 16px;
            height: 16px;
            box-sizing: border-box;
            display: inline-block;
            border: 1px solid #e6e6e6;
            margin: 2px 5px;
            border-radius: 50%;
            transition: 0.2s;

        }

        input[type="radio"]:checked+.radio-beauty {
            border: solid 1px green;
            padding: 3px;
            background-color: green;
            background-clip: content-box;
            box-shadow: inset 0 0 1px rgba(0, 128, 0, 0.2), 0 0 3px green;

        }

html:

 "radio" name="test" id="one" hidden />
        
        "one" class="radio-beauty">
        one

        "radio" name="test" id="tow" hidden />
        "tow" class="radio-beauty">
        tow

checkbox相关
css:

.checkbox {
            -webkit-transition: background-color 0.3s;
            transition: background-color 0.3s; 
            background-color: #fff;
            border: 1px solid #d7d7d7;
            border-radius: 3px;
            width: 16px;
            height: 16px;
            vertical-align:middle;
            margin: 0 5px;
        }
        .checkbox-input:checked+.checkbox {
            background-color: green;
        }
        .checkbox-input:checked+.checkbox:after {
            content: "\2714";
            display: inline-block;
            height: 100%;
            width: 100%;
            color: #fff;
            text-align: center;
            line-height: 16px;
            font-size: 12px;
            box-shadow: 0 0 4px green;
        }

html:

 "checkbox-input" id="checkbox" name="test" type="checkbox"hidden/>
            "checkbox" for="checkbox">
            Hello

select 相关：
css:

  .container{
    position: relative;
    width: 150px;
    height: 26px;
    background-color: #f0f0f0;
    border: 1px solid #ececec;
}
    .beauty-select{  
    background-color: #fff;
    height:28px;  
    width:180px; 
    padding:0 10px; 
    line-height:28px;  
    border: 1px solid #ececec;
    background: url(w.png) no-repeat;
    background-position: 95% 50%;
  
    -webkit-appearance: none;  /*去掉样式 for chrome*/
                appearance:none;/*去掉样式*/
                -moz-appearance:none;/*去掉样式*/
}  

html:

"container">
       
    "bbxb" id="selecte" class="beauty-select">  
        "">---请选择--  
        "0" selected="selected">男  
        "1">女