修改單選框，多選框，下拉框的默認樣式

修改單選框的默認樣式

html

<input type="radio" name="sh" id="yes" value="2"  checked="checked" />
<label class="radLabel" for="yes"></label>

<input type="radio" name='sh' id="no" value="3" />
<label class="radLabel" for="no"></label>

CSS樣式

input[type="radio"]{
    display: none;
}
input[type="radio"]+label:before {
    display: inline-block;
    content: "";
    width: 10px;
    height: 10px;
    border: 1px solid #ccc;
    border-radius: 50%;
    margin-right: 0.5vw;
}

input[type="radio"]:checked+label:before {
      width: 10px;
      height: 10px;
      border: 1px solid #31668d;
     background: #007AFF;
       /*background: url(../img/circleOn.png) no-repeat center;*/
        background-size: 60%;
}

修改多選框的默認樣式

html

<input type="checkbox" name="sh" id="yes" value="2" checked="checked" />
 <label class="radLabel" for="yes"></label>

<input type="checkbox" name='sh' id="no" value="3" />
<label class="radLabel" for="no"></label>

CSS樣式

input[type="checkbox"] {
      display: none;
 }
            
 input[type="checkbox"]+label:before {
       display: inline-block;
      content: "";
       width: 10px;
       height: 10px;
       border: 1px solid #ccc;
      margin-right: 0.5vw;
 }
            
 input[type="checkbox"]:checked+label:before {
        width: 10px;
        height: 10px;
       background: #007AFF;
       /*background: url(../img/on.png) no-repeat center;*/
        background-size: 106%;
}

 

修改默認下拉框樣式

html

<span class="sec_sel">
            <select>
                <option>1111</option>
                <option>1111</option>
                <option>1111</option>
                <option>1111</option>
                <option>1111</option>
            </select>
 </span>

CSS樣式

.sec_sel {
    display: block;
    width: 180px !important;
    float: left;
    height: 26px !important;
    line-height: 26px !important;
    border: 1px solid #ddd !important;
    box-sizing: border-box;
    position: relative;    
}
.sec_sel select{
    display: block;
    border: none;
    outline: none;
    width: 100%;
    line-height: 26px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color: #666;
    background: transparent;
}
/*使用僞類給select添加自己想用的圖標*/
.sec_sel:after {
    content: "";
    width: 14px;
    height: 8px;
    background: url(../img/down_JT.png) no-repeat center;//需要更改的背景圖片
    position: absolute;
    right: 7px;
    top: 39%;
    background-size: 90%;
    pointer-events: none;
}