僞元素表單控件默認樣式重置與自定義大全
by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=3381css
本文參考自TJ VanToll的List of Pseudo-Elements to Style Form Controls.html
若是你想看原汁原味的譯文，能夠移步這裏：僞元素控制表單樣式. css3
我這裏全部的效果都本身從新制做demo試驗了下，辨別下真僞，看看window環境下的差別以及其餘一些屬性支持等，而後，補充、記錄、備忘。web
您如今可能會以爲折騰的這些東西不實用，過個1~2年，可能就是個寶了，記住這裏，適時過來瞅瞅，會有別樣收穫。chrome
時間流逝，瀏覽器們支持的僞元素勢必會愈來愈多，所以，這裏也會不按期更新，固然，頻率確定不會像大姨媽那樣頻繁。瀏覽器
1、索引
由於牽扯多個瀏覽器，所以，內容還算挺多，有個索引仍是頗有必要的；爲節約高度，水平排列，但願還習慣。app
- <input>元素
- 其餘元素
- 雜項
2、<input>元素們
input[type=button]
參見「其餘元素」部分的<button>元素less
input[type=checkbox] / input[type=radio]
Trident內核，也就是咱們常說的IE瀏覽器下（如下全部IE下的僞元素均指IE10+瀏覽器），使用::-ms-check能夠更改單複選框的UI. 以下CSS代碼以及HTML代碼：dom
::-ms-check {
color: #34538b;
background: #a0b3d6;
padding: .5em;
}
<input type="radio" /> <input type="checkbox" />
結果在window7 IE10下的效果就是這樣：
ide
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控制而成的效果。
而上面的兩個可以使用僞元素就是指向的這兩層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">
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;
}
我的以爲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整容的模樣:
這……
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;
}
的效果與默認效果的對比：
input[type=password]
記得IE10剛出來那會兒，就有人叫囂了：哎呀呀呀，IE10下文本框輸入文字後有叉叉啊；哎呀呀呀，密碼框輸入後有眼睛啊；哎呀呀呀，怎麼去掉啊？
我我的以爲眼睛不挺好的，幹嗎要抹殺掉呢？
我忽然想起了一首歌：「你不要這樣的看着我，個人臉會變成紅蘋果……」。估計你們比較害羞，被IE MM的眼睛盯着看很差意思，因此纔想去掉的。
去除password類型輸入框的眼睛須要使用僞元素::-ms-reveal，咱們可使用display, visibility控制顯隱，也可使用color, background控制樣式。
當咱們使用background控制背景的時候，IE瀏覽器本身holder的黑色邊框樣式會自動瓦解，使用系統一脈相承的文本框UI，以下圖所示：
若是您沒有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一致。
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;
}
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; }
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，以下面這個效果：
3、其餘元素們
<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;
}
不過上面這些我的以爲沒啥屌用，除了一些極客狀況，有可能有用的是一些重置，如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; } /* 糟糕 */
實際上，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)：
<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;
}
截圖效果：
4、雜項
表單驗證信息
僅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; }
- 1. 默認樣式與重置樣式表
- 2. 表單元素默認不繼承樣式
- 3. 去除表單元素的默認樣式
- 4. WPF自定義控件與樣式(10)-進度控件ProcessBar自定義樣
- 5. WPF自定義控件與樣式(8)-ComboBox與自定義多選控件MultComboBox
- 6. 更改checkbox默認樣式、radio默認樣式，CSS實現自定義
- 7. CheckBox、radio改變默認樣式，自定義樣式
- 8. 清除input默認樣式，純css自定義input checkbox樣式
- 9. WPF自定義控件與樣式(9)-樹控件TreeView與菜單Menu-ContextMenu
- 10. HTML表單元素、表單控件
- 更多相關文章...
- • 自定義TypeHandler - MyBatis教程
- • MySQL默認值（DEFAULT） - MySQL教程
- • RxJava操作符（十）自定義操作符
- • IntelliJ IDEA代碼格式化設置
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 融合阿里雲，牛客助您找到心儀好工作
- 2. 解決jdbc(jdbctemplate)在測試類時不報錯在TomCatb部署後報錯
- 3. 解決PyCharm GoLand IntelliJ 等 JetBrains 系列 IDE無法輸入中文
- 4. vue+ant design中關於圖片請求不顯示的問題。
- 5. insufficient memory && Native memory allocation (malloc) failed
- 6. 解決IDEA用Maven創建的Web工程不能創建Java Class文件的問題
- 7. [已解決] Error: Cannot download ‘https://start.spring.io/starter.zip?
- 8. 在idea讓java文件夾正常使用
- 9. Eclipse啓動提示「subversive connector discovery」
- 10. 帥某-技巧-快速轉帖博主文章（article_content）
- 1. 默認樣式與重置樣式表
- 2. 表單元素默認不繼承樣式
- 3. 去除表單元素的默認樣式
- 4. WPF自定義控件與樣式(10)-進度控件ProcessBar自定義樣
- 5. WPF自定義控件與樣式(8)-ComboBox與自定義多選控件MultComboBox
- 6. 更改checkbox默認樣式、radio默認樣式，CSS實現自定義
- 7. CheckBox、radio改變默認樣式，自定義樣式
- 8. 清除input默認樣式，純css自定義input checkbox樣式
- 9. WPF自定義控件與樣式(9)-樹控件TreeView與菜單Menu-ContextMenu
- 10. HTML表單元素、表單控件