伪元素表单控件默认样式重置与自定义大全

太多不好复制：请戳此处

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]

本文参考自TJ VanToll的List
of Pseudo-Elements to Style Form Controls.

如果你想看原汁原味的译文，可以移步这里：伪元素控制表单样式.

我这里所有的效果都自己重新制作demo试验了下，辨别下真伪，看看window环境下的差异以及其他一些属性支持等，然后，补充、记录、备忘。

您现在可能会觉得折腾的这些东西不实用，过个1~2年，可能就是个宝了，记住这里，适时过来瞅瞅，会有别样收获。

时间流逝，浏览器们支持的伪元素势必会越来越多，因此，这里也会不定期更新，当然，频率肯定不会像大姨妈那样频繁。

一、索引

因为牵扯多个浏览器，因此，内容还算挺多，有个索引还是很有必要的；为节约高度，水平排列，希望还习惯。
<input>元素
button
checkbox/radio
color
date
file
number
password
placeholder属性
range
reset
search
submit
text

其他元素
button
keygen
meter
progress
select
textarea

杂项
表单验证提示

二、<input>元素们

input[type=button]

参见“其他元素”部分的<button>元素

input[type=checkbox] / input[type=radio]

Trident内核，也就是我们常说的IE浏览器下（以下所有IE下的伪元素均指IE10+浏览器），使用

::-ms-check

可以更改单复选框的UI. 如下CSS代码以及HTML代码：

::-ms-check {
color: #34538b;
background: #a0b3d6;
padding: .5em;
}
<input type="radio" />
<input type="checkbox" />

未完。。。。。。


ps：在增加一个：

去除Webkit搜索框样式

 

Webkit内核的浏览器会给搜索框增加一些额外的样式，通过下面的CSS可以去掉这个样式： 

input[type=search] {
-webkit-appearance: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button{
display: none;
}

地址：戳此处