CSS 翻譯系列_(使用簡單CSS技巧增強你的Input輸入欄位)

原文地址http://www.jankoatwarpspeed.com/post/2008/07/27/Enhance-your-input-fields-with-simple-CSS-tricks.aspx

 

第一次翻譯技術類型的文章，措辭應該會有不當之處，還請各位看客們批評的批評，指正的指正，小弟還望各位不吝賜教。

發現國內技術類書籍翻譯存在一個誤區，或許稱不上誤區，而是能力不足，不少優秀的技術書籍一旦翻譯為中文，便會引來唏噓聲一片，大家不妨上豆瓣看看。

 

依小弟愚見，之所以出現這類現象，大致可以分為兩類情況，一是譯者英語功底不足，專業詞彙量不足，這類翻譯書籍基本上是在糟蹋人，侮辱了作者又來侮辱讀者，二是譯者水平是足夠了，但是譯者的文學水平不敢恭維，語句牽強，難於理解，

 

說了這麽多，感覺是給自己下了一個套，一旦下文的翻譯不能滿足各位的品味，那就有些搬起石頭砸自己的腳的尷尬了.

 使用簡單CSS技巧增強你的Input輸入欄位

我們將嘗試去構建一個高效且好看的web表單。但總會有一個新的挑戰，如果讀過我以前關於如何構建一個像樣表單的文章，你應該注意到存在如此多的細節，Label的布置，文本高亮或者元素對齊。但是，通過使用一些簡單的CSS技巧，能夠使得一個普通、無趣的web表單更加有趣。

 

你將看到的例子是你每天都用到的：Blog評論表單。你將如何增強你的表單呢？

 

準備：

 

 <div id="inputArea">        <label for="txtName">            Name</label>        <input id="Text16" type="text" />        <label for="txtEmail">            Email</label>        <input id="Text17" type="text" />        <label for="txtWebsite">            Website</label>        <input id="Text18" type="text" />        <label for="txtComment">            Comment</label>        <textarea id="Textarea6" rows="4" cols="30"></textarea></div>

 

...添加Borders

 

至少你能夠做的是添加Borders和Padding到你的表單域。以上的兩個例子展示了你能夠設定border的顏色去匹配你的顏色模式，添加padding到你的輸入欄位也是一個很好的實踐。這將使表單看起來更加清晰。該樣本中設定input和textarea 4px

 

#inputArea{    font-family: Arial, Sans-Serif;    font-size: 13px;    background-color: #d6e5f4;    padding: 10px;}#inputArea input[type="text"], #inputArea textarea{    font-family: Arial, Sans-Serif;    font-size: 13px;    margin-bottom: 5px;    display: block;    padding: 4px;    border: solid 1px #85b1de;    width: 300px;}

 讓我們快速的回顧以上代碼，這是為第二個樣本所寫的代碼，整個表單是淺藍色背景#d6e5f4和10px的padding。每個input元素以block展示，這樣確保標籤布置在輸入欄位之上。現在，這很簡單。但是你可以做更多。

 

...添加背景

 

你也能夠想下面例子中一樣添加一些純色的背景

#inputArea input[type="text"], #inputArea textarea{    font-family: Arial, Sans-Serif;    font-size: 13px;    margin-bottom: 5px;    display: block;    padding: 4px;    border: solid 1px #85b1de;     width: 300px;    background-color: #EDF2F7;}

或者你也能夠添加一些漸層色為背景，以下樣本展示了灰和藍色漸層。

#inputArea input[type="text"], #inputArea textarea{    font-family: Arial, Sans-Serif;    font-size: 13px;    margin-bottom: 5px;    display: block;    padding: 4px;    border: solid 1px #85b1de;    width: 300px;    background-image: url( 'blue_bg.png' );    background-repeat: repeat-x;    background-position: top;}

這個技巧簡單並且僅包括最後的三條代碼，增加漸層圖片作為背景，設定它水平重複(repeat-x)，並且將它放置在field的頂端。簡單吧

...添加一些行為

 

非常簡單，使得啟用的輸入欄位與其它不同，如所示。

 

 

#inputArea input[type="text"]:focus, #inputArea textarea:focus{    background-image: none;    background-color: #ffffff;    border: solid 1px #33677F;}

就像你看到的，代碼非常簡單。每一次當field得到焦點時，一個不同的樣式將會被應用，它改變了背景和邊框。但是稍等！它不能在IE上工作！！為此我們不得不使用js（或者jquery）尋求協助。好的，你知道我在開玩笑。

#inputArea input, #inputArea textarea{    font-family: Arial, Sans-Serif;    font-size: 13px;    margin-bottom: 5px;    display: block;    padding: 4px;    width: 300px;}

除了背景和邊框，我們將為輸入欄位和文字框定義所有的樣式。

 

.activeField{        background-image: none;        background-color: #ffffff;        border: solid 1px #33677F;}.idle{    border: solid 1px #85b1de;    background-image: url( 'blue_bg.png' );    background-repeat: repeat-x;    background-position: top;}

接下來，我們將定義兩個類，他們將會設定idle和active狀態下的樣式，
這裡使用jquery，

$(document).ready(function(){    $("input, textarea").addClass("idle");        $("input, textarea").focus(function(){            $(this).addClass("activeField").removeClass("idle");    }).blur(function(){            $(this).removeClass("activeField").addClass("idle");    });});

現在可以工作在IE上了，當然，它也可以工作在Firefox上，這些代碼做了三件事情：初始化，添加“idle”類到所有的input和為focus和blue事件定義的行為可能並不完美，但是可以工作，

就這樣了，還有什麼你可以做呢？

 

實驗

使用不同的顏色，邊框大小以及背景。你可以添加滑鼠移至上方（hover）功能。嘗試並且擺脫乏味無趣的表單吧！