僞元素表單控件默認樣式重置與自定義大全

時間  2020-06-29
標籤 元素 表單 控件 默認 樣式 重置 自定義 大全 欄目 HTML 简体版
原文   原文鏈接

 

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

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下的效果就是這樣：
IE10下check僞元素效果截圖 張鑫旭-鑫空間-鑫生活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控制而成的效果。

input[type=color]默認效果

而上面的兩個可以使用僞元素就是指向的這兩層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:
input-date shadow Dom示意 張鑫旭-鑫空間-鑫生活

補充於2013-06-08
感謝@ethanchen提點，Shadow Dom以下幾步便可查看。

Chrome瀏覽器下，F12打開開發者工具面板，右下角有個齒輪圖片，點擊之：

再展開的面板中勾選」Show Shadom DOM」便可：
Chrome瀏覽器下展現Show Shadow DOM

<– 更新結束 –>

date類型文本框默認效果默認左邊效果的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;
}

date類型input僞元素更改樣式截圖 張鑫旭-鑫空間-鑫生活

我的以爲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;
}

結果整容成下面這樣子——跟鄭爽同樣-少女變少婦了：
IE10 file類型控件僞元素樣式重置 張鑫旭-鑫空間-鑫生活

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整容的模樣:
Chrome瀏覽器file控件UI重置 張鑫旭-鑫空間-鑫生活

這……

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;	
}

的效果與默認效果的對比：
type=number去除上下小箭頭按鈕 張鑫旭-鑫空間-鑫生活

input[type=password]
記得IE10剛出來那會兒，就有人叫囂了：哎呀呀呀，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個顏色名稱及對應顏色值」一文。

因而：
IE10與placeholder

而後Chrome瀏覽器，喔呵，這回亮了，IE瀏覽器和Chrome瀏覽器竟然站到同一戰線上了，僞元素爲：::-webkit-input-placeholder. 活脫脫就一個私有前綴的差別，相似代碼：

::-webkit-input-placeholder {
    color: mediumvioletred;
    text-indent: 5px;
}

相似效果：
Chrome瀏覽器下placeholder顏色變化效果

對於首次粉墨登場的FireFox瀏覽器，其僞元素是::-moz-placeholder, 聽說這個僞元素是FireFox 19以後才支持的，以前是使用:-moz-placeholder僞類。

CSS代碼走起：

::-moz-placeholder {
    color: mediumvioletred;
    text-indent: 5px; /* 沒有用 */
    opacity: 1!important;
}

FireFox21下佔位符變色效果 張鑫旭-鑫空間-鑫生活

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，見截圖特地標示 */

IE10下range控件大改造 張鑫旭-鑫空間-鑫生活

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下：
Chrome下range控件的僞元素控制 張鑫旭-鑫空間-鑫生活

咱們還可使用::-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; }

win7 chrome type=search類型按鈕UI與僞元素控制

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-value使用效果截圖

IE10+還提供了僞元素::-ms-clear，能夠改變或者隱藏IE10+瀏覽器文本框末尾的關閉小叉叉。

隱藏以下：

::-ms-clear { display: none; }

固然，咱們還可使用border, background等控制其UI，以下面這個效果：
:ms-clear控制效果截圖

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;
}

FireFox 21下按鈕亂入的效果 張鑫旭-鑫空間-鑫生活

不過上面這些我的以爲沒啥屌用，除了一些極客狀況，有可能有用的是一些重置，如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>

keygen元素在Chrome瀏覽器下

<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; } /* 糟糕 */

Chrome 25下meter元素對比效果截圖

實際上，FireFox下，對僞元素::-moz-meter-bar也是有反應的，不過貌似效果有點偏題了，以下CSS：

::-moz-meter-bar {
    background: rgba(0,96,0,.6);
}

結果不是背景條變化，而是進度條變了，所有都變了，以下截圖：
FireFox21 下meter元素對比效果截圖

<progress>元素
又是一個各個瀏覽器都有僞元素控制的HTML5控件元素。

外甥點燈籠——照舊，先看IE瀏覽器，僞元素爲::-ms-fill，能夠改變已完成進度條的部分樣式，如背景色：

::-ms-fill { background: #34538b; }

::-ms-fill IE10

Chrome瀏覽器相對複雜，控制也相對精細些，其Shadow DOM以下：
webkit progress元素的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)：
Chrome下進度條設置

對於FireFox瀏覽器，::-moz-progress-bar僞元素控制，以下CSS：

::-moz-progress-bar { background: #34538b; }

效果截圖以下(win7 FF21)：
FF21下progress元素效果截圖

<select>元素
IE10瀏覽器下，這廝::-ms-expand能夠改變下拉框元素的下拉按鈕樣式。

::-ms-expand {
    padding: .5em;
    color: #34538b;
    border: 1px solid #a0b3d6;
    background: #f0f3f9;
}

IE10下拉框下拉按鈕僞元素改變

<textarea>元素
Webkit下有僞元素::-webkit-resizer能夠改變右下角的拉伸小標記的樣式。

例如，咱們能夠隱藏之（不一樣於resize: none，仍可拉伸）或設置背景圖片替換之：

::-webkit-resizer {
    display: none;
}
::-webkit-resizer {
    background: url(/study/image/selection.gif);
    outline: 1px dotted #000;
}

截圖效果：
::webkit-resizer僞類使用演示

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效果：
popup效果圖

咱們可能須要以下一些設置：

::-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; }

本文地址：http://www.zhangxinxu.com/wordpress/?p=3381

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程