&nbs p;
本文参考自TJ VanToll的List of Pseudo-Elements to Style Form Controls.
如果你想看原汁原味的译文，可以移步这里：伪元素控制表单样式.
我这里所有的效果都自己重新制作demo试验了下，辨别下真伪，看看window环境下的差异以及其他一些属性支持等，然后，补充、记录、备忘。
您现在可能会觉得折腾的这些东西不实用，过个1~2年，可能就是个宝了，记住这里，适时过来瞅瞅，会有别样收获。
时间流逝，浏览器们支持的伪元素势必会越来越多，因此，这里也会不定期更新，当然，频率肯定不会像大姨妈那样频繁。
一、索引
因为牵扯多个浏览器，因此，内容还算挺多，有个索引还是很有必要的；为节约高度，水平排列，希望还习惯。
.entry .pseudo_index{overflow:hidden;_zoom:1; list-style-type:none;margin:0; padding:0;}.pseudo_index li{padding-right:30px; padding-bottom:5px; float:left;}.pseudo_index a{display:inline-block; padding:0 5px; background-color:#34538b; color:#fff; border-radius:3px; font-size:14px;}.pseudo_index a:active{color:#333;background-color:#beceeb;}.pseudo_index a:hover{text-decoration:none;}.pseudo_index a:visited{color:yellow;} <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 代码：
@H_ 512 _6@ :: -ms-check { color: # 34538b; background: #a0b3d6; padding: .5em; }
<input ty PE ="radio" /> <input type="checkbox" />
结果在window7 IE10下的效果就是这样：
如果您手头上有IE10+浏览器，您可以狠狠地点击这里：::check 改变 单复选框的默认样式demo
input[type=color]
目前IE10以及FireFox21还没有支持 input[type=color] ，自然也没有响应的伪元素支持，Ch rom e浏览器下可以，其提供了两个伪元素用来改变默认样式： ::- webkit -color -s watch-wrapper 以及 ::-webk IT -color-swatch .
一般而言，HT ML 5中表单的控件效果都是通过浏览器的 Shadow Dom 创建的，脱离文档主树，不受大环境CSS影响，要控制其UI只能使用浏览器开发的伪元素API接口。好比上面的 input[type=color] 在C hr ome下的默认UI效果（见下）其实就是两层 div ，然后浏览器 自带 的一些CSS控制而成的效果。
而上面的两个可使用伪元素就是指向的这两层div，我们可以借此应用部分的CSS样式进行重置，记住，只有部分的样式可以重置。而这些伪元素CSS我们是无法使用浏览器自带的 开发工具 查看到的，因为其并不属于文档树，只是背后的一颗子树。
例如，这里，我们可以使用伪元素，应用特定样式，让两层div首尾连在一起，就像下面这个效果：
CSS代码如下：
::-webkit-color-swatch-wrapper { border: 1px solid # 777 ; background -i mage: -webkit-gra die nt(linear, 0 0, 100% 0, From ( red ), color-stop(15%, orange), color-stop(30%, yellow), color-stop(50%, green), color-stop(65%, darkcyan), color-stop(80%, blue), to(purple)); } ::-webkit-color-swatch { h ei ght:21px; position:relative; left: 40px; top:-5px; }
<input type="color">
如果使用的 或者 有Chrome浏览器，您可以狠狠地点击这里：伪元素改变color类型input框demo
input[type=date]
依旧Chrome浏览器是主角，目前WebKit下有如下8个伪元素可以改变日期控件的UI：
下图为原文作者不知从哪儿搞来的内部结构，就是上面提到的Shadow Dom:
补充于2013-06-08
感谢@ethanchen提点，Shadow Dom如下几步即可查看。
Chrome浏览器下， F1 2打开 开发者 工具面板， 右下角 有个齿轮图片，点击之：
再展开的面板中勾选”Show Shadom DOM ”即可：
<– 更新结束 –>
默认左边效果的 date 类型文本框应用如下的CSS伪元素样式后，就会变成：
::-webkit-datetime-edit { padding: 1px; background: url(/study/image/selection.gif); } ::-webkit-datetime-edit-fields-wrapper { background-color: #eee; } ::-webkit-datetime-edit-text { color: #4D90FE; padding: 0 .3em; } ::-webkit-datetime-edit-year-field { color: purple; } ::-webkit-datetime-edit-month-field { color: blue; } ::-webkit-datetime-edit-day-field { color: green; } ::-webkit-inner-spin-button { visibility: hidden; } ::-webkit-calendar-picker-indicator { border: 1px solid #ccc; border-radius: 2px; box-shadow: inset 0 1px #fff, 0 1px #eee; background-color: #eee; background-image: -webkit-linear-gradient(top, #f0f0f0, #e6e6e6); color: #666; }
目前，下拉的日期选择组件的UI貌似还不能修改。您可以狠狠地点击这里：伪元素改变date类型input框的默认样式demo
个人 觉得 8个 伪类 中，最实用的是使用： ::-webkit-inner-spin-button { visibility: hidden; } 去除设计师讨厌的上下小箭头。
补充于2013-06-27
貌似date类型文本框在Chrome下现在多了个叉叉清除内容的效果，伪元素是 ::-webkit-clear-button , 若要清除，可使用如下代码：
::-webkit-clear-button { -webkit-appearance: none; } input[type=file]
文件上传空间，IE10以及Chrome都有伪元素可以染指该类型控件，从哪个浏览器 开始 好呢？就先IE10浏览器吧（下同）。
IE10+浏览器使用的是 ::-ms- br owse 伪元素，可以改变按钮模样部分的边框、背景色、高度啊之类的，如下一段示例CSS代码：
::-ms-browse { padding: .4em; line-height: 24px; /* 光标 垂直居中 */ border: 1px solid #a0b3d6; background: #f0f3f9; color: #34538b; } 结果整容成下面这样子——跟郑爽一样-少女变少妇了 ：
IE浏览器一向走自己的路，让 别人 骂去。显然，Chrome用法与之大相径庭，伪元素为 ::-webkit-file-upload-button ，类似效果CSS如下：
::-webkit-file-upload-button { padding: .4em; line-height: 30px; border: 1px solid #a0b3d6; background: #f0f3f9; color: #34538b; } 看看Chrome整容的模样:
这……
您可以狠狠地点击这里：伪元素改变file类型控件样式demo 自己进入点评下。
input[type=number]
目前Webkit浏览器独掌天下，以下三个伪元素可以耍弄：
从使用角度讲，下面代码是最有用的：
::-webkit-inner-spin-button { -webkit-appearance: none; /* 上下小箭头按钮，你丫太丑了，滚粗，负分 */ } 下图为又设置了：
::-webkit-textfield-decoration-container { background-color: #f0f3f9; } 的效果与默认效果的对比：
若有雅致，您可以狠狠地点击这里：伪元素改变number类型input框样式demo
input[type=password]
记得IE10刚出来那会儿，就有人叫嚣了：哎呀呀呀，IE10下文本框输入文字后有叉叉啊；哎呀呀呀，密码框输入后有 眼睛 啊；哎呀呀呀，怎么去掉啊？
我个人觉得眼睛不挺好的，干嘛要抹杀掉呢？
我突然想起了一首歌：“你不要这样的看着我，我的脸会变成红 苹果 …… ”。估计大家比较害羞，被IE MM的眼睛盯着看不好 意思 ，所以才想去掉的。
去除 password 类型输入框的眼睛需要使用伪元素 ::-ms- rev eal ，我们可以使用 dis play , visibility 控制显隐，也可以使用 color , background 控制样式。
当我们使用 background 控制背景的时候，IE浏览器自己holder的黑色边框样式会自动瓦解，使用系 统一 脉相承的文本框UI，如下图所示：
如果您有IE10+浏览器，您可以狠狠地点击这里：伪元素改变password框的眼睛demo
如果您没有IE10浏览器，哥，出门500米右拐就是护城河，您可以跳下去——清醒下。我今天想办法搞到了我们主站的一些访问数据，哟，IE10用户数目超过我的想象，还老多来~用上海话讲，就是“老激棍来”，不要迷糊迷糊还在折腾IE6了，拥抱未来，拥抱变化，GOGOGO!
placeholder属性
哈哈，属性貌似比类型要 吃 香，难得百花齐放百家争鸣，FireFox浏览器这回也有得登场了！
如下HTML代码：
<input placeholder="占座" />
各个浏览器轮着上~~
先看IE浏览器， :-ms-input-placeholder 一看就是虐 placeholder 属性的，来个变色 ① +缩进，当当当当：
:-ms-input-placeholder { color: mediumvioletred; text-indent: 5px; } //zxx: 颜色 mediumvioletred 取自“CSS3下的147个颜色名称及对应颜色值”一文。
于是：
然后Chrome浏览器，喔呵，这回亮了，IE浏览器和Chrome浏览器居然站到同一战线上了，伪元素为： ::-webkit-input-placeholder . 活脱脱就一个私有前缀的差异，类似代码：
::-webkit-input-placeholder { color: mediumvioletred; text-indent: 5px; } 类似效果：
对于首次粉墨登场的FireFox浏览器，其伪元素是 ::-moz-placeholder , 据说这个伪元素是FireFox 19之后才支持的，之前是使用 :-moz-placeholder 伪类 。
CSS代码走起：
::-moz-placeholder { color: mediumvioletred; text-indent: 5px; /* 没有用 */ opacity: 1!important; }
FireFox浏览器下占位符文字的透明度默认是 0.54 , 至少我window7 FireFox 21下是如此，因此需要强制 opacity: 1 让 placeholder 值颜色与IE/Chrome一致。
您可以狠狠地点击这里：伪元素改变placeholder占位符颜色缩进demo
input[type=range]
IE, Chrome, FireFox本轮均有出场。HTML测试代码都是一样的，很 简单 ，就一个 range 控件：
<input type="range" />
IE浏览器伪元素相对复杂些：
::-ms-fill-lower : 已经拖拽的区域 ::-ms-fill-upper : 还没有拖拽的区域 ::-ms-ticks-before : 前面/上面的刻度线 ::-ms-ticks-after : 后面、下面的刻度线 ::-ms-thumb : 中间拖动的块块 ::-ms-track : 拖动轨道 ::ms-tooltip : 拖动时候显示的文字什么的。注意，这个元素只能用 display:none 等隐藏样式。如下设置：
::-ms-fill-lower { background: orange; } ::-ms-fill-upper { background: green; } ::-ms-thumb { background: red; } ::-ms-ticks-before { display: block; color: black; } ::-ms-ticks-after { display: block; color: blue; } ::-ms-track { padding: 5px; } ::-ms-tooltip { display: none; /* 数值提示 只能是display或visibility，见截图特意标示 */
Webkit核心，如Chrome浏览器下，使用的伪元素为 ::-webkit-slider-runnable-track 和 ::-webkit-slider-thumb . 前者指的是“跑动轨迹”，也就是那个条条元素；后者指用来拖的哪块突出的小疙瘩。应用如下CSS：
::-webkit-slider-runnable-track { border: 1px solid #a0b3d6; background: #f0f3f9; } ::-webkit-slider-thumb { outline: 1px dotted #a0b3d6; background-color: #34538b; } 效果如下，window 7下：
我们还可以使用 ::-webkit-slider-runnable-track:hover 以及 ::-webkit-slider-thumb:hover 实现鼠标经过效果(demo中有)。
对于FireFox浏览器，据说在FireFox 22下才有效果，我目前是FireFox 21, 好像已经是最新版本，因此，无效果截图（个把月后查看demo可能就有效果了），代码如下：
::-moz-range-track { border: 1px solid #a0b3d6; height: 20px; background: #f0f3f9; } ::-moz-range-thumb { background: #34538b; height: 30px; } 您可以狠狠地点击这里：伪元素改变range类型input框默认样式demo
input[type=reset]
参见<button>元素
input[type=se Arch ]
目前Chrome下小有成就，两个伪元素： ::-webkit-search-cancel-button 和 ::-webkit-search-results-button ，前者控制输入文字后出现的叉叉，后者控制放大镜。下面的代码可以把它们全部干掉！
/* 去除 圆 角 */ input[type=search] { -webkit-appearance: none; } /* 隐藏取消按钮 */ ::-webkit-search-cancel-button { -webkit-appearance: none; } /* 隐藏放大镜 */ ::-webkit-search-results-button { -webkit-appearance: none; }
您可以狠狠地点击这里：伪元素改变search类型input框demo
input[type=s ub mit]
参见<button>元素
input[type=text]
在IE10+浏览器下，提供了伪元素 ::-ms-value , 可以更改文本框(如 type=text , type=password 等)以及下拉框( select )的样式。例如下面的HTML代码：
<input type="text" value="雅美蝶你能再深 一点 么"> <input type="password" value="雅美蝶你能再深一点么"> <select><option selected>雅美蝶你能再深一点么</option></select>
配合如下的CSS：
::-ms-value { padding: 4px; color: #34538b; border: 1px solid #a0b3d6; background-color: #f0f3f9; } 于是， “蝴蝶飞呀！就象童年在风里跑
感觉年少的彩虹比海更远比天还要高
蝴蝶飞呀！飞向未来的城堡
打开梦想的天窗 让那成长更快更美好……”
IE10+还提供了伪元素 ::-ms-clear ，可以改变或者隐藏IE10+浏览器文本框末尾的关闭小叉叉。
隐藏如下：
::-ms-clear { display: none; } 当然，我们还可以使用 border , background 等控制其UI，如下面这个效果：
您可以狠狠地点击这里：IE10+伪元素控制 主体 及关闭小控件UI demo
三、其他元素们
<button>元素
此部分，目前，貌似仅Gecko内核浏览器有相关处理，两个伪元素， ::-moz-focus-outer 和 ::-moz-focus-inner , 主要针对按钮类型的元素，包括 button 类型, reset 类型以及 submit 类型。
例如，使用 border 让这两个伪元素呈现一下：
button::-moz-focus-inner, input::-moz-focus-inner { border: 5px solid #34538b; } button::-moz-focus-outer, input::-moz-focus-outer { border: 5px solid # CAD 5eb; } 现形吧，为师的完全体……
擦，被巨人乱入了，下面这张才是~~
FireFox浏览器，您可以狠狠地点击这里：伪元素按钮内外focus元素样式demo
不过 上面这些个人觉得没啥屌用，除了一些极客情况，有可能有用的是一些重置，如 border 与 padding :
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } < keygen >元素
Webkit下有伪元素可控制，为 ::-webkit-keygen-select , 如下设置：
::-webkit-keygen-select { border: 1px solid #a0b3d6; background-color: #f0f3f9; color: #34538b; }
<keygen>
< ;m eter>元素
<meter> 用做测量、评分等。Webkit下有如下伪元素可控：
如下HTML与CSS代码：
<meter low="69" high="80" max="100" optimum="100" value="92">优</meter> <meter low="69" high="80" max="100" optimum="100" value="72">良</meter> <meter low="69" high="80" max="100" optimum="100" value="52">差</meter>
.deal meter { -webkit-appearance: none; } .::-webkit-meter-bar { height: 1em; background: white; border: 1px solid black; } ::-webkit-meter-optimum-value { background: green; } /* 好 */ ::-webkit-meter-suboptimum-value { background: orange; } /* 凑合 */ ::-webkit-meter-even-less-good-value { background: blue; } /* 糟糕 */
您可以狠狠地点击这里：伪元素改变HTML5 meter元素样式demo
实际上，FireFox下，对伪元素 ::-moz-meter-bar 也是有反应的，不过貌似效果有点偏题了，如下CSS：
::-moz-meter-bar { background: rgba(0,96,0,.6); } 结果不是背景条变化，而是 进度 条变了，全部都变了，如下截图：
< PR ogress>元素
又是一个各个浏览器都有伪元素控制的HTML5控件元素。
外甥点灯笼——照旧，先看IE浏览器，伪元素为 ::-ms-fill ，可以改变已完成进度条的部分样式，如背景色：
::-ms-fill { background: #34538b; }
Chrome浏览器相对复杂，控制也相对精细些，其Shadow DOM如下：
于是，如下CSS控制：
progress { -webkit-appearance: none; } ::-webkit-progress-inner-element { } ::-webkit-progress-bar { border: 1px solid black; } ::-webkit-progress-value { background: #34538b; } 效果如下(win7 Chrome 25)：
对于FireFox浏览器， ::-moz-progress-bar 伪元素控制，如下CSS：
::-moz-progress-bar { background: #34538b; } 效果截图如下(win7 F f2 1)：
您可以狠狠地点击这里：伪元素改变HTML5 progress元素的默认样式demo
<select>元素
IE10浏览器下，这厮 ::-ms-e xp and 可以改变下拉框元素的下拉按钮样式。
::-ms-expand { padding: .5em; color: #34538b; border: 1px solid #a0b3d6; background: #f0f3f9; }
<textarea>元素
Webkit下有伪元素 ::-webkit-resizer 可以改变右下角的拉伸小标记的样式。
例如，我们可以隐藏之（不同于 re Size: none ，仍可拉伸）或设置背景图片替换之：
::-webkit-resizer { display: none; }
::-webkit-resizer { background: url(/study/image/selection.gif); outline: 1px dotted #000; } 截图效果：
您可以狠狠地点击这里：伪元素改变HTML5 textarea resize样式demo
四、杂项
表单验证信息
仅Webkit内核浏览器目前鸟之，改变验证提示时候bubble框的UI, 伪元素如下：
实际重置样式的时候，只要使用部分就可以了，个人愚见， ::-webkit-validation-bubble-text-block 与 ::-webkit-validation-bubble-heading 有功能重复之嫌，因此，一般只要设置一个就可以了！ ::-webkit-validation-bubble-heading 要更加深入一些。
比方说我们要得到类似下面看似不错的UI效果：
我们可能需要如下一些设置：
::-webkit-validation-bubble { min-width:152px; m arg in-top: -1px;} ::-webkit-validation-bubble-arrow { border: 1px solid #F7CE39; background: #FFFBC7; top: 4px; left: 0px; } /* 你不觉得默认尖角太大了吗？这里设置小一点，默认含relative属性 */ ::-webkit-validation-bubble-arrow-clipper { text-align: center ; } ::-webkit-validation-bubble-heading { color: #444; } ::-webkit-validation-bubble-message { border: 1px solid #F7CE39; background: #FFFBC7; border-radius: 3px; } /* 一般而言，这是重置的主体，改变边框、背景色以及圆角大小等 */ ::-webkit-validation-bubble-text-block { font-size: 12px; } 您可以狠狠地点击这里：伪元素改变HTML5 表单验证提示demo
五、写在 高考 首日、NBA总决赛首日的结语
今天高考的 同学 10年之后可能记不得当初的考试题目，但是多 半 记得那天淅淅沥沥或哗哗啦啦的雨。所谓触景生情，多半都夹带着过往的惊情。
要说我的记忆，那就是早饭吃的是八宝粥、考试完了自行车骑得飞奔地快，以及去喜欢的妹子家窜门~~
今天热火输了，哦耶
，我不是哪个球队的死忠球迷，而是是热火队 对手 的球迷，步行者加油、马刺加油~~
想到周今天才“周三”，一丝彷徨；一想到这几天雨哗啦啦，又欣慰。要是今天放假，我钓鱼就不爽来~~
随便点吐槽，感谢阅读，欢迎纠错，欢迎补充！
（本篇完）
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-伪元素表单控件默认样式重置与自定义大全 全部内容，希望文章能够帮你解决 html5教程-伪元素表单控件默认样式重置与自定义大全 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-伪元素表单控件默认样式重置与自定义大全的详细内容...