国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

【譯】HTML表單高級(jí)樣式

Jacendfeng / 3096人閱讀

摘要：示例多選框和單選框給多選框和單選框添加樣式是很讓人凌亂的。通向漂亮表單之路一些有用的庫(kù)和拓展工具盡管在復(fù)選框和單選框上的表現(xiàn)力已經(jīng)夠用了，但離其支持高級(jí)表單組件仍然遙遙無(wú)期。其表單部分挺有用的。

系列文章說(shuō)明


原文

在本文中，我們將了解如何在HTML表單上使用CSS，為那些難于自定義的表單組件加以樣式。如前文所述，文本框和按鈕很適合使用CSS，而現(xiàn)在我們得來(lái)探索HTML表單樣式的那些坑了。

在進(jìn)一步討論前，先回顧下兩種HTML表單組件：

比較糟糕的
一些元素只能使用很少的樣式，而且得依賴一些復(fù)雜的技巧，偶爾還得用到CSS3的高級(jí)知識(shí)。

丑陋的
別指望用CSS給這些元素添加樣式了。在最好的情況，你還能寫(xiě)一點(diǎn)不能跨瀏覽器支持的代碼，而且還不可能完全控制這些元素的樣式。

CSS的表現(xiàn)力

除了文本框和按鈕，表單組件面臨的最大問(wèn)題，是CSS在多數(shù)情況下沒(méi)有足夠的表現(xiàn)力來(lái)恰當(dāng)?shù)亟o復(fù)雜組件添加樣式。

近來(lái)HTML和CSS的演進(jìn)已在拓展CSS的表現(xiàn)力：

CSS2.1很受限，只提供了三個(gè)偽類(lèi)：

:active

:focus

:hover

CSS Selector Level 3新增了幾個(gè)和HTML表單相關(guān)的偽類(lèi)：

:enabled

:disabled

:checked

:indeterminate

CSS Basic UI Level 3也添加了幾個(gè)偽類(lèi)用于描述組件狀態(tài)：

:default

:valid

:invalid

:in-range

:out-of-range

:required

:optional

:read-only

:read-write

CSS Selector Level 4正處于開(kāi)發(fā)狀態(tài)，而且討論的重點(diǎn)并不在于增加更多內(nèi)容以改進(jìn)表單：

:user-error只是:invalid偽類(lèi)的一個(gè)增強(qiáng)版、

雖然上述這些都是個(gè)好的開(kāi)始，但其中仍有兩個(gè)問(wèn)題：第一，某些瀏覽器并不會(huì)實(shí)現(xiàn)CSS2.1之外的特性。第二，這些改進(jìn)并未好到能處理諸如日期選擇器之類(lèi)的復(fù)雜組件。

瀏覽器廠商也為拓展CSS在表單上的表現(xiàn)力做了些試驗(yàn)，最好得了解下哪些可以使用。

警告：雖然這些實(shí)驗(yàn)挺有趣的，但它們并非標(biāo)準(zhǔn)、并不可靠。若你要使用它們（通常你也不會(huì)這么做），你得自己擔(dān)起風(fēng)險(xiǎn)，而且使用非標(biāo)準(zhǔn)屬性也是可能阻礙Web發(fā)展的做法。

Mozilla的CSS拓展

:-moz-placeholder

:-moz-submit-invalid

:-moz-ui-invalid

:-moz-ui-valid

Webkit的CSS拓展

::-webkit-input-placeholder

更多拓展

Microsoft的CSS拓展

:-ms-input-placeholder

Opera沒(méi)有和HTML表單相關(guān)的拓展

控制表單元素的外觀

基于 WebKit- (Chrome, Safari) 和 Gecko- (Firefox) 的瀏覽器為HTML組件提供了最高等級(jí)的定制。這些定制也是跨平臺(tái)的，所以瀏覽器需要一個(gè)機(jī)制來(lái)轉(zhuǎn)換那些能被改變樣式的表單組件的原生外觀和體驗(yàn)。

于是它們使用了私有屬性：-webkit-appearance 或 -moz-appearance。這些屬性是非標(biāo)準(zhǔn)的，也不應(yīng)被使用。實(shí)際上，它們?cè)赪ebkit和Gecko上的表現(xiàn)也不盡相同。但是，有一個(gè)值是應(yīng)該知道的：none，使用該值你就可以獲得對(duì)組件樣式的（幾乎所有）控制權(quán)。

所以，若你在一個(gè)元素上應(yīng)用樣式時(shí)遇到問(wèn)題，可以試著使用這些私有屬性（譯注：用none值覆蓋默認(rèn)值）。下面我們會(huì)看到幾個(gè)例子，但最為人熟知的用例是重置Webkit瀏覽器上搜索框的樣式。


    

注意：在我們討論Web技術(shù)時(shí)，是難于預(yù)測(cè)未來(lái)的，但拓展CSS的表現(xiàn)力確實(shí)很難。另一些做了探索工作的標(biāo)準(zhǔn)如Shadow DOM提供了新的視角。我們對(duì)完全可配置樣式的表單的追求還遠(yuǎn)未結(jié)束。
示例 多選框和單選框

給多選框和單選框添加樣式是很讓人凌亂的。例如，多選框和單選框的大小往往不會(huì)發(fā)生改變，而且不同瀏覽器的表現(xiàn)相當(dāng)不同。

一個(gè)簡(jiǎn)單例子

考慮如下示例：

span {
    display: inline-block;
    background: red;
}

input[type=checkbox] {
    width : 100px;
    height: 100px;
}

不同瀏覽器的處理如下：

瀏覽器 渲染效果
Firefox 16 (Mac OSX)
Chrome 22 (Mac OSX)
Opera 12.01 (Mac OSX)
Internet Explorer 9 (Windows 7)
Internet Explorer 7 (Windows XP)
復(fù)雜點(diǎn)的例子

由于Opera和IE沒(méi)有諸如-webkit-appearance和-moz-appearance之類(lèi)的特性，所以使用這類(lèi)特性是不太合適的。幸運(yùn)的是，在這種情況下用CSS還能找出解決辦法來(lái)。舉一個(gè)常見(jiàn)的例子：

加一些基本樣式：

body {
  font: 1em sans-serif;
}

form {
  display: inline-block;

  padding: 0;
  margin : 0;
}

fieldset {
  border : 1px solid #CCC;
  border-radius: 5px;
  margin : 0;
  padding: 1em;
}

label {
  cursor : pointer;
}

p {
  margin : 0;
}

p+p {
  margin : .5em 0 0;
}

現(xiàn)在，我們來(lái)加樣式以獲得一個(gè)定制的復(fù)選框。

我們的計(jì)劃是用我們自己的圖像來(lái)替換原生的復(fù)選框。首先得準(zhǔn)備一張具有所有復(fù)選框所需狀態(tài)的圖像，這些狀態(tài)有：未勾選、已勾選、禁用未勾選、禁用已勾選。該圖像可用CSS雪碧圖來(lái)做：

先從隱藏原生的復(fù)選框開(kāi)始，我們只是簡(jiǎn)單地把它們從頁(yè)面的可視范圍中挪出。這里有兩個(gè)要重點(diǎn)考慮的事：

別使用display:none來(lái)隱藏復(fù)選框，因?yàn)槿缜懊嫣岬降模覀冃枰ＷC復(fù)選框?qū)τ脩艨捎谩Ｊ褂?b>display:none的話，復(fù)選框就不再是用戶可訪問(wèn)的，即不能再勾選或者不勾選它。

我們將使用一些CSS3選擇器來(lái)實(shí)現(xiàn)我們的樣式。為支持老舊瀏覽器，可以在我們要用的選擇器前加:root偽類(lèi)。在已有的實(shí)現(xiàn)中，支持我們需要的選擇器的瀏覽器也支持:root偽類(lèi)，而剩下的瀏覽器就不支持了。所以這是一種用來(lái)識(shí)別老舊瀏覽器的方便做法，老舊瀏覽器中將會(huì)看到普通的復(fù)選框、而現(xiàn)代瀏覽器中將會(huì)看到定制的復(fù)選框。

:root input[type=checkbox] {
  /* 原生的復(fù)選框會(huì)從頁(yè)面的可視范圍中被挪出 */
  position: absolute;
  left: -1000em;
}

現(xiàn)在我們已經(jīng)移除了原生的復(fù)選框，可以添加我們自己的了，這里會(huì)在原生復(fù)選框后面的元素使用:before偽元素。下面的選擇器中，我們先用屬性選擇器來(lái)獲取復(fù)選框；然后使用相鄰兄弟選擇器來(lái)獲取原來(lái)復(fù)選框后的label。最后我們通過(guò)給:before偽元素添加樣式，用其來(lái)顯示我們定制的復(fù)選框。

:root input[type=checkbox] + label:before {
  content: "";
  display: inline-block;
  width  : 16px;
  height : 16px;
  margin : 0 .5em 0 0;
  background: url("https://developer.mozilla.org/files/4173/checkbox-sprite.png") no-repeat 0 0;

/* 下一屬性用于在文本基線調(diào)整復(fù)選框的位置 */

  vertical-align: bottom;
  position: relative;
  bottom: 2px;
}

接下來(lái)用原來(lái)復(fù)選框的:checked和:disabled偽類(lèi)來(lái)改變我們定制的復(fù)選框的狀態(tài)。由于我們使用了CSS雪碧圖，我們只需要調(diào)整背景的位置而已。

:root input[type=checkbox]:checked + label:before {
  background-position: 0 -16px;
}

:root input[type=checkbox]:disabled + label:before {
  background-position: 0 -32px;
}

:root input[type=checkbox]:checked:disabled + label:before {
  background-position: 0 -48px;
}

最后也是很重要的一步：當(dāng)用戶使用鍵盤(pán)在不同表單組件間瀏覽時(shí)，每個(gè)組件應(yīng)該能看到聚焦的效果。由于我們隱藏了原生的復(fù)選框，所以只能自己實(shí)現(xiàn)這一特性來(lái)讓用戶知曉他們正處于何處。下列的CSS實(shí)現(xiàn)了對(duì)我們的定制復(fù)選框的聚焦：

:root input[type=checkbox]:focus + label:before {
  outline: 1px dotted black;
}

最終效果如下：

演示

處理選擇框噩夢(mèng) 

select {
  width   : 80px;
  padding : 10px;
}

option {
  padding : 5px;
  color   : red;
}

后面的表格展示了不同瀏覽器如何在兩種情況下處理這一樣式。（渲染效果中）前兩列只是簡(jiǎn)單的例子，后兩列則使用了些定制的CSS來(lái)獲得對(duì)組件外觀的更多控制，如下所示：

select, option {
  -webkit-appearance : none; /* 獲得對(duì)Webkit瀏覽器里外觀的控制 */
  -moz-appearance : none; /* 獲得對(duì)Gecko瀏覽器里外觀的控制 */

  /* 獲得對(duì)Presto (Opera) 和 Trident (IE)瀏覽器里外觀的控制
     注意這也能在Gecko瀏覽器里起作用，且對(duì)Webkit瀏覽器有副作用 */  
  background : none;
}
瀏覽器 普通渲染（關(guān)閉） 普通渲染（打開(kāi)） 調(diào)整后渲染（關(guān)閉） 調(diào)整后渲染（打開(kāi)）
Firefox 16 (Mac OSX)
Firefox 16 (Windows 7)
Chrome 22 (Mac OSX)
Chrome 22 (Windows 7)
Opera 12.01 (Mac OSX)
Internet Explorer 9 (Windows 7) N/A N/A
Internet Explorer 7 (Windows XP) N/A N/A

如你所見(jiàn)，即使使用了 -*-qppearance 屬性，仍會(huì)有問(wèn)題存在：

padding屬性在不同操作系統(tǒng)和瀏覽器中的處理是不一致的。

老舊的IE不支持平滑的樣式。

火狐沒(méi)有能給予下拉箭頭樣式的方式。

若想要給下拉菜單中的元素以樣式，則Chrome和Opera在不同系統(tǒng)下的表現(xiàn)不盡相同。

同時(shí)，在本例中，我們只討論了三個(gè)CSS屬性；想想要考慮更多的CSS屬性會(huì)有多么混亂。可見(jiàn)，CSS確實(shí)不太適合用來(lái)改變這些組件的外觀和體驗(yàn)，但它仍讓你能做些調(diào)整，如果你愿意忍受不同瀏覽器或不同操作系統(tǒng)上的不同的話。

我們將在下篇文章：[表單組件的屬性兼容表]()中嘗試指出哪些屬性是可用的。

通向漂亮表單之路：一些有用的庫(kù)和拓展工具

盡管CSS在復(fù)選框和單選框上的表現(xiàn)力已經(jīng)夠用了，但離其支持高級(jí)表單組件仍然遙遙無(wú)期。即使在

      • <strike id="a2wyc"><input id="a2wyc"></input></strike>
        

<