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;
}