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

太多不好复制：请戳此处

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[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;
}

地址： 戳此处