本文參考自TJ VanToll的List of Pseudo-Elements to Style Form Controls.
如果你想看原汁原味的譯文，可以移步這里：偽元素控制表單樣式.
我這里所有的效果都自己重新制作demo試驗了下，辨別下真偽，看看window環境下的差異以及其他一些屬性支持等，然后，補充、記錄、備忘。
您現在可能會覺得折騰的這些東西不實用，過個1~2年，可能就是個寶了，記住這里，適時過來瞅瞅，會有別樣收獲。
時間流逝，瀏覽器們支持的偽元素勢必會越來越多，因此，這里也會不定期更新，當然，頻率肯定不會像大姨媽那樣頻繁。
一、索引
因為牽扯多個瀏覽器，因此，內容還算挺多，有個索引還是很有必要的；為節約高度，水平排列，希望還習慣。
- <input>元素
- 其他元素
- 雜項
二、<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" />
結果在window7 IE10下的效果就是這樣：
如果您手頭上有IE10+瀏覽器，您可以狠狠地點擊這里：::check改變單復選框的默認樣式demo
input[type=color]
目前IE10以及FireFox21還沒有支持input[type=color]，自然也沒有響應的偽元素支持，Chrome瀏覽器下可以，其提供了兩個偽元素用來改變默認樣式：::-webkit-color-swatch-wrapper以及::-webkit-color-swatch.
一般而言，HTML5中表單的控件效果都是通過瀏覽器的Shadow Dom創建的，脫離文檔主樹，不受大環境CSS影響，要控制其UI只能使用瀏覽器開發的偽元素API接口。好比上面的input[type=color]在Chrome下的默認UI效果（見下）其實就是兩層div，然后瀏覽器自帶的一些CSS控制而成的效果。
![input[type=color]默認效果](http://image.zhangxinxu.com/image/blog/201306/2013-06-06_204021.png)
而上面的兩個可使用偽元素就是指向的這兩層div，我們可以借此應用部分的CSS樣式進行重置，記住，只有部分的樣式可以重置。而這些偽元素CSS我們是無法使用瀏覽器自帶的開發工具查看到的，因為其並不屬於文檔樹，只是背后的一顆子樹。
例如，這里，我們可以使用偽元素，應用特定樣式，讓兩層div首尾連在一起，就像下面這個效果：
CSS代碼如下：
::-webkit-color-swatch-wrapper {
border: 1px solid #777;
background-image: -webkit-gradient(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 { height:21px; position:relative; left: 40px; top:-5px; }
<input type="color">
如果使用的或者有Chrome瀏覽器，您可以狠狠地點擊這里：偽元素改變color類型input框demo
input[type=date]
依舊Chrome瀏覽器是主角，目前WebKit下有如下8個偽元素可以改變日期控件的UI：
::-webkit-datetime-edit– 控制編輯區域的::-webkit-datetime-edit-fields-wrapper– 控制年月日這個區域的::-webkit-datetime-edit-text– 這是控制年月日之間的斜線或短橫線的::-webkit-datetime-edit-month-field– 控制月份::-webkit-datetime-edit-day-field– 控制具體日子::-webkit-datetime-edit-year-field– 控制年文字, 如2013四個字母占據的那片地方::-webkit-inner-spin-button– 這是控制上下小箭頭的::-webkit-calendar-picker-indicator– 這是控制下拉小箭頭的
下圖為原文作者不知從哪兒搞來的內部結構，就是上面提到的Shadow Dom:
補充於2013-06-08
感謝@ethanchen提點，Shadow Dom如下幾步即可查看。
Chrome瀏覽器下，F12打開開發者工具面板，右下角有個齒輪圖片，點擊之：
再展開的面板中勾選”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-browse偽元素，可以改變按鈕模樣部分的邊框、背景色、高度啊之類的，如下一段示例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-textfield-decoration-container– input內部、上下箭頭以及填寫數值的外部容器::-webkit-inner-spin-button– 就是Chrome下上上下下的小小按鈕::-webkit-outer-spin-button– 測到瀏覽器起火都不知是干嘛的~
從使用角度講，下面代碼是最有用的：
::-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-reveal，我們可以使用display, 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=search]
目前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=submit]
參見<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 #cad5eb;
}
現形吧，為師的完全體……
擦，被巨人亂入了，下面這張才是~~
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>
<meter>元素<meter>用做測量、評分等。Webkit下有如下偽元素可控：
::-webkit-meter-bar– 條條::-webkit-meter-optimum-value– 得分好的時候那部分區域::-webkit-meter-suboptimal-value– 分數湊合時候::-webkit-meter-even-less-good-value– 分數糟糕時候區域狀態
如下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);
}
結果不是背景條變化，而是進度條變了，全部都變了，如下截圖：
<progress>元素
又是一個各個瀏覽器都有偽元素控制的HTML5控件元素。
外甥點燈籠——照舊，先看IE瀏覽器，偽元素為::-ms-fill，可以改變已完成進度條的部分樣式，如背景色：
::-ms-fill { background: #34538b; }
Chrome瀏覽器相對復雜，控制也相對精細些，其Shadow DOM如下：
::-webkit-progress-inner-element–progress內元素::-webkit-progress-bar– 背景進度條::-webkit-progress-value– 完成進度條
於是，如下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 FF21)：
您可以狠狠地點擊這里：偽元素改變HTML5 progress元素的默認樣式demo
<select>元素
IE10瀏覽器下，這廝::-ms-expand可以改變下拉框元素的下拉按鈕樣式。
::-ms-expand {
padding: .5em;
color: #34538b;
border: 1px solid #a0b3d6;
background: #f0f3f9;
}
<textarea>元素
Webkit下有偽元素::-webkit-resizer可以改變右下角的拉伸小標記的樣式。
例如，我們可以隱藏之（不同於resize: 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– 整個彈出框區域::-webkit-validation-bubble-arrow– 彈出框的尖角::-webkit-validation-bubble-arrow-clipper - 彈出框尖角所在塊狀區域::-webkit-validation-bubble-heading– 文字標題占據區域::-webkit-validation-bubble-message– 文字提示的整個方形的信息框::-webkit-validation-bubble-text-block– 文字所在block塊區域
實際重置樣式的時候，只要使用部分就可以了，個人愚見，::-webkit-validation-bubble-text-block與::-webkit-validation-bubble-heading有功能重復之嫌，因此，一般只要設置一個就可以了！::-webkit-validation-bubble-heading要更加深入一些。
比方說我們要得到類似下面看似不錯的UI效果：
我們可能需要如下一些設置：
::-webkit-validation-bubble { min-width:152px; margin-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年之后可能記不得當初的考試題目，但是多半記得那天淅淅瀝瀝或嘩嘩啦啦的雨。所謂觸景生情，多半都夾帶着過往的驚情。
要說我的記憶，那就是早飯吃的是八寶粥、考試完了自行車騎得飛奔地快，以及去喜歡的妹子家竄門~~
今天熱火輸了，哦耶，我不是哪個球隊的死忠球迷，而是是熱火隊對手的球迷，步行者加油、馬刺加油~~
想到周今天才“周三”，一絲彷徨；一想到這幾天雨嘩啦啦，又欣慰。要是今天放假，我釣魚就不爽來~~
隨便點吐槽，感謝閱讀，歡迎糾錯，歡迎補充！
原創文章，轉載請注明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=3381
（本篇完）