成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

【譯】HTML表單樣式

taowen / 3081人閱讀

摘要：并非所有組件受的影響都是平等的如今在表單使用時(shí)依然有一些困難這些問(wèn)題可歸為三類還好的若存在跨平臺(tái)問(wèn)題，一些元素可以只添加少許的樣式，有如下幾個(gè)結(jié)構(gòu)元素此外，還有所有的文本框組件單行或多行，以及按鈕。

系列文章說(shuō)明


原文

本文中，我們將學(xué)習(xí)如何使用CSS來(lái)讓HTML表單看起來(lái)更漂亮，這可能需要竅門(mén)才能做到。由于歷史及技術(shù)上的原因，表單組件并不太適合使用CSS；而也正因?yàn)橛羞@些困難，許多的開(kāi)發(fā)者會(huì)選擇[創(chuàng)建定制表單組件]()來(lái)獲得對(duì)外觀和體驗(yàn)的控制。然而，在現(xiàn)代瀏覽器中，網(wǎng)頁(yè)設(shè)計(jì)師可以擁有更多對(duì)表單元素的控制權(quán)了。讓我們來(lái)深入了解下吧。

為何難以使用CSS給表單組件添加樣式？

在web發(fā)展的早期，大約1995年，表單控件就已經(jīng)在the HTML 2 specification中給添加到HTML了。由于表單組件的復(fù)雜性，瀏覽器開(kāi)發(fā)商們就選擇了依靠操作系統(tǒng)來(lái)管理和渲染它們。

幾年之后，CSS誕生了，這就在技術(shù)上使得用原生組件來(lái)實(shí)現(xiàn)表單的做法也有了樣式需求。然而在CSS的早期，給表單控件添加樣式并未被優(yōu)先考慮。

由于用戶們習(xí)慣了在交互平臺(tái)上的視覺(jué)體驗(yàn)，瀏覽器開(kāi)發(fā)商不得不讓表單控件可以被添加樣式；而說(shuō)實(shí)話，在今天也依然難以重構(gòu)所有表單控件讓它們可被樣式化。

即使到了現(xiàn)在，也依然沒(méi)有一個(gè)多帶帶的瀏覽器實(shí)現(xiàn)了所有CSS 2.1規(guī)范。然而隨著時(shí)間推移，瀏覽器開(kāi)發(fā)商們已經(jīng)改進(jìn)了表單元素的CSS支持，雖然其可用性仍受詬病，但現(xiàn)在你已經(jīng)可以使用CSS來(lái)給HTML表單添加樣式了。

并非所有組件受CSS的影響都是平等的

如今在表單使用CSS時(shí)依然有一些困難；這些問(wèn)題可歸為三類：

還好的

若存在跨平臺(tái)問(wèn)題，一些元素可以只添加少許的樣式，有如下幾個(gè)結(jié)構(gòu)元素：

此外，還有所有的文本框組件（單行或多行），以及按鈕。

比較糟糕的

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

這其中包括了元素；該元素不能在跨平臺(tái)時(shí)被恰當(dāng)?shù)囟ㄎ?。此外，?fù)選框及單選框不能直接添加樣式；然而有了CSS3之后你就可以做到這點(diǎn)了。placeholder的內(nèi)容是不能通過(guò)標(biāo)準(zhǔn)方法來(lái)添加樣式的，但所有實(shí)現(xiàn)了它的瀏覽器都會(huì)以私有的CSS偽元素或偽類的形式讓你能給它添加樣式。

至于要具體如何處理這些特殊情況，我們會(huì)在[HTML表單高級(jí)樣式]()一文中討論。

丑陋的

某些元素是不能用CSS添加樣式的。它們包括所有的高級(jí)UI組件比如范圍滑塊、顏色、日期控件，以及下拉組件（包括 

input[type=search] {
  border: 1px dotted #999;
  border-radius: 0;

  -webkit-appearance: none;
}

在上面這張Chrome的搜索框截圖中，連個(gè)文本框都設(shè)置了邊框，但第一個(gè)文本框沒(méi)有使用-webkit-appearance屬性進(jìn)行渲染，而第二個(gè)賊使用了-webkit-appearance:none。它們間的差別值得注意。

字體和文本

CSS字體和文本特性在任何組件中都可以被輕易使用（當(dāng)然，你也可以在表單組件上使用@font-face）。然而，不同瀏覽器的行為表現(xiàn)通常是不一樣的。某些組件默認(rèn)不會(huì)從父元素那繼承font-family和font-size，同時(shí)許多瀏覽器會(huì)使用系統(tǒng)的默認(rèn)樣式來(lái)作為替代。要讓你的表單的外觀與其他內(nèi)容保持一致，你可以在樣式表中添加如下規(guī)則：

button, input, select, textarea {
  font-family : inherit;
  font-size   : 100%;
}

下面的截圖體現(xiàn)了設(shè)置之后的不同；左邊是MAC OSX的Firefox中元素的默認(rèn)渲染效果，其使用了系統(tǒng)的默認(rèn)字體樣式。而右邊則是使用了上面的字體協(xié)調(diào)樣式后的相同元素。

要使用系統(tǒng)默認(rèn)樣式還是自定義樣式以適應(yīng)頁(yè)面內(nèi)容，仍存在很多爭(zhēng)議。這個(gè)決定權(quán)在于身為網(wǎng)頁(yè)或web應(yīng)用設(shè)計(jì)師的你身上。

盒模型

所有的文本框都完全支持CSS盒模型相關(guān)的屬性（width, height, padding, margin, border）。然而以前要呈現(xiàn)這些組件時(shí)，瀏覽器都得依賴系統(tǒng)的默認(rèn)樣式。至于如何把這些樣式混用到你的頁(yè)面中，這得取決于你。

若你想保持這些原生組件的樣子和體驗(yàn)，你會(huì)在給它們實(shí)現(xiàn)一致的樣式時(shí)遇到點(diǎn)困難。這是因?yàn)槊總€(gè)組件都有它們獨(dú)有的邊框、內(nèi)邊距和外邊距的規(guī)定。所以，如果你希望在幾個(gè)不同的組件間保持相同的大小，你就得使用box-sizing屬性：

input, textarea, select, button {
  width : 150px;
  margin: 0;

  -webkit-box-sizing: border-box; /* 兼容基于Webkit的舊版瀏覽器 */
     -moz-box-sizing: border-box; /* 兼容基于Gecko的舊版瀏覽器（Firefox < 29） */
          box-sizing: border-box;
}

上面的截圖中，左邊一列是不使用box-sizing構(gòu)建的，而右邊一列則使用了該屬性并賦予其值border-box?？梢?jiàn)設(shè)置該屬性讓所有的元素都占據(jù)了相同的空間大小，而覆蓋了系統(tǒng)給各種組件的默認(rèn)規(guī)則。

定位

定位HTML表單元素通常不是什么大問(wèn)題，然而有兩個(gè)特殊元素值得你關(guān)注一下：

legend

元素可以很好地支持樣式，除了定位。在每種瀏覽器中，元素都位于其父

元素的上邊框以上，根本沒(méi)辦法在HTML文檔流中改變其定位、讓其遠(yuǎn)離那個(gè)上邊框。你只能使用position屬性來(lái)讓其絕對(duì)或相對(duì)定位，否則它就只能視作是fieldset邊框的一部分。

以為無(wú)障礙技術(shù)的原因，使得成為很重要的元素（它作為fieldset中各個(gè)表單組件的label，并以此被無(wú)障礙設(shè)備讀出），通常他會(huì)和一個(gè)標(biāo)題做搭配，并以無(wú)障礙技術(shù)可識(shí)別的形式隱藏起來(lái)，就像這樣：


  Hi!
  
Hello


legend {
  width: 1px;
  height: 1px;
  overflow: hidden;
}
textarea

所有瀏覽器都默認(rèn)將textarea元素當(dāng)作內(nèi)聯(lián)元素，并讓它與文本的底線對(duì)齊。而這種設(shè)定通常并不是我們想要的，使用display屬性可以很容易就將其從inline-block改為block。但若你還想把它當(dāng)內(nèi)聯(lián)元素使用，那通常得改變其垂直對(duì)齊方式：

textarea {
  vertical-align: top;
}
實(shí)例

來(lái)看一個(gè)給表單以樣式的例子吧，通過(guò)例子，許多相關(guān)的知識(shí)點(diǎn)會(huì)更容易理解些。而我們要構(gòu)建的，是如下圖所示的contact表單：

HTML

相比[本指南第一篇文章]()，這里的HTML稍微多了點(diǎn)內(nèi)容；只有幾個(gè)額外的字段和一個(gè)標(biāo)題而已。


  
to: Mozilla
CSS

有趣的部分開(kāi)始了，但在我們編碼之前，還需要三個(gè)額外的資源：

明信片背景

一套打字機(jī)字體：fontsquirrel.com上的"Secret Typewriter"

一套手寫(xiě)字體：fontsquirrel.com上的"Journal"

現(xiàn)在我們可以投入寫(xiě)代碼了。首先，我們要準(zhǔn)備好@font-face的定義以及、

元素的基本樣式：

@font-face{
  font-family : "handwriting";

  src : url("journal.eot");
  src : url("journal.eot?") format("eot"),
        url("journal.woff") format("woff"),
        url("journal.ttf") format("truetype");
}

@font-face{
  font-family : "typewriter";

  src : url("veteran_typewriter.eot");
  src : url("veteran_typewriter.eot?") format("eot"),
        url("veteran_typewriter.woff") format("woff"),
        url("veteran_typewriter.ttf") format("truetype");
}

body {
  font  : 21px sans-serif;

  padding : 2em;
  margin  : 0;

  background : #222;
}

form {
  position: relative;

  width  : 740px;
  height : 498px;
  margin : 0 auto;

  background: #FFF url(background.jpg);
}

然后我們來(lái)定位標(biāo)題和所有表單元素：

h1 {
  position : absolute;
  left : 415px;
  top  : 185px;
 
  font : 1em "typewriter", sans-serif;
}

#from {
  position: absolute;
  left : 398px;
  top  : 235px;
}

#reply {
  position: absolute;
  left : 390px;
  top  : 285px;
}

#message {
  position: absolute;
  left : 20px;
  top  : 70px;
}

接下來(lái)，我們得開(kāi)始對(duì)表單元素自身做配置了。首先，確保使用了正確的字體：

label {
  font : .8em "typewriter", sans-serif;
}

文本框需要使用一些公共樣式。簡(jiǎn)單起見(jiàn)，可以移除它們的邊框和背景，然后重新定義其內(nèi)外邊距：

input, textarea {
  font    : .9em/1.5em "handwriting", sans-serif;

  border  : none;
  padding : 0 10px;
  margin  : 0;
  width   : 240px;

  background: none;
}

而當(dāng)這些輸入框獲得焦點(diǎn)時(shí)，還得讓它們用一個(gè)淺灰色、半透明背景做高亮。注意為了移除一些瀏覽器自帶默認(rèn)的高亮，還需要配置outline屬性：

input:focus, textarea:focus {
  background   : rgba(0,0,0,.1);
  border-radius: 5px;
  outline      : none;
}

現(xiàn)在我們的文本框已經(jīng)整好了，但我們還得調(diào)整單行和多行文本框以作適配，因?yàn)橥ǔＫ鼈兛雌饋?lái)是一點(diǎn)都不相同的。

對(duì)單行文本框需要一些微調(diào)以讓其在IE下看起來(lái)漂亮點(diǎn)。IE不是基于字體的自然高度來(lái)定義文本框高度的（但其它所有瀏覽器都這么做），要修復(fù)這點(diǎn)，我們得給文本框指定一個(gè)明確的高度，如下所示：

input {
    height: 2.5em; /* 針對(duì)IE */
    vertical-align: middle; /* 可選配置，能在舊版IE中看起來(lái)漂亮點(diǎn) */
}