css修改input表單默認樣式重置與自定義大全

鏈接地址:

 

　　　　偽元素表單控件默認樣式重置與自定義大全

　　　　http://www.zhangxinxu.com/wordpress/?p=3381

 

　　　　

　　　　Chrome 現在不支持通過偽元素修改 meter 元素樣式了

　　　　https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css#L1003

 

以下測試大部分都是在谷歌瀏覽器

 

1.隱藏input等表單的默認樣式背景

　　

textarea,select,input{-webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none;}

 

2.清除input表單number的樣式

　　

input[type=number] {
    -moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

 

3.清除input表單checkbox的樣式

　　http://www.cnblogs.com/xyzhanjiang/p/3989836.html

　　3.1 修改checkbox樣式

<p class="agreement">
                    <input type="checkbox" id="checkbox">
                    <label for="checkbox"></label>
</p>

 

.agreement label {
    cursor: pointer;
    position: absolute;
    width: 16px;
    height: 16px;
    top: 3px;
    left: 0;
    background: #eee;
    border-radius: 100%;
}

.agreement label:after {
    opacity: 0.2;
    content: '';
    position: absolute;
    width: 19px;
    height: 17px;
    background: url(../img/Other/checkbox1.png) 0 0px;
}

.agreement label:hover::after {
    opacity: 0.5;
}

.agreement input[type=checkbox]:checked+label:after {
    opacity: 1;
}

input[type=checkbox] {
    visibility: hidden;
}

 

4. 設置placeholder顏色

　　

input::-webkit-input-placeholder {
color: #ccc;
}

 5.去除表單后的上下小箭頭

　　

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}