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

資訊專欄INFORMATION COLUMN

【譯】HTML表單樣式

taowen / 3070人閱讀

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

系列文章說明


原文

本文中，我們將學習如何使用CSS來讓HTML表單看起來更漂亮，這可能需要竅門才能做到。由于歷史及技術上的原因，表單組件并不太適合使用CSS；而也正因為有這些困難，許多的開發者會選擇[創建定制表單組件]()來獲得對外觀和體驗的控制。然而，在現代瀏覽器中，網頁設計師可以擁有更多對表單元素的控制權了。讓我們來深入了解下吧。

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

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

幾年之后，CSS誕生了，這就在技術上使得用原生組件來實現表單的做法也有了樣式需求。然而在CSS的早期，給表單控件添加樣式并未被優先考慮。

由于用戶們習慣了在交互平臺上的視覺體驗，瀏覽器開發商不得不讓表單控件可以被添加樣式；而說實話，在今天也依然難以重構所有表單控件讓它們可被樣式化。

即使到了現在，也依然沒有一個多帶帶的瀏覽器實現了所有CSS 2.1規范。然而隨著時間推移，瀏覽器開發商們已經改進了表單元素的CSS支持，雖然其可用性仍受詬病，但現在你已經可以使用CSS來給HTML表單添加樣式了。

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

如今在表單使用CSS時依然有一些困難；這些問題可歸為三類：

還好的

若存在跨平臺問題，一些元素可以只添加少許的樣式，有如下幾個結構元素：

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

比較糟糕的

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

這其中包括了元素；該元素不能在跨平臺時被恰當地定位。此外，復選框及單選框不能直接添加樣式；然而有了CSS3之后你就可以做到這點了。placeholder的內容是不能通過標準方法來添加樣式的，但所有實現了它的瀏覽器都會以私有的CSS偽元素或偽類的形式讓你能給它添加樣式。

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

丑陋的

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

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

  -webkit-appearance: none;
}

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

字體和文本

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

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

下面的截圖體現了設置之后的不同；左邊是MAC OSX的Firefox中元素的默認渲染效果，其使用了系統的默認字體樣式。而右邊則是使用了上面的字體協調樣式后的相同元素。

要使用系統默認樣式還是自定義樣式以適應頁面內容，仍存在很多爭議。這個決定權在于身為網頁或web應用設計師的你身上。

盒模型

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

若你想保持這些原生組件的樣子和體驗，你會在給它們實現一致的樣式時遇到點困難。這是因為每個組件都有它們獨有的邊框、內邊距和外邊距的規定。所以，如果你希望在幾個不同的組件間保持相同的大小，你就得使用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構建的，而右邊一列則使用了該屬性并賦予其值border-box。可見設置該屬性讓所有的元素都占據了相同的空間大小，而覆蓋了系統給各種組件的默認規則。

定位

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

legend

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

元素的上邊框以上，根本沒辦法在HTML文檔流中改變其定位、讓其遠離那個上邊框。你只能使用position屬性來讓其絕對或相對定位，否則它就只能視作是fieldset邊框的一部分。

以為無障礙技術的原因，使得成為很重要的元素（它作為fieldset中各個表單組件的label，并以此被無障礙設備讀出），通常他會和一個標題做搭配，并以無障礙技術可識別的形式隱藏起來，就像這樣：


  Hi!
  
Hello


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

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

textarea {
  vertical-align: top;
}
實例

來看一個給表單以樣式的例子吧，通過例子，許多相關的知識點會更容易理解些。而我們要構建的，是如下圖所示的contact表單：

HTML

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


  
to: Mozilla
CSS

有趣的部分開始了，但在我們編碼之前，還需要三個額外的資源：

明信片背景

一套打字機字體：fontsquirrel.com上的"Secret Typewriter"

一套手寫字體：fontsquirrel.com上的"Journal"

現在我們可以投入寫代碼了。首先，我們要準備好@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);
}

然后我們來定位標題和所有表單元素：

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

接下來，我們得開始對表單元素自身做配置了。首先，確保使用了正確的字體：

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

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

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

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

  background: none;
}

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

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

現在我們的文本框已經整好了，但我們還得調整單行和多行文本框以作適配，因為通常它們看起來是一點都不相同的。

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

input {
    height: 2.5em; /* 針對IE */
    vertical-align: middle; /* 可選配置，能在舊版IE中看起來漂亮點 */
}