原文地址

textarea 是頁面上我們可以實現的一種元素類型，在評論框，交流框，或者跳轉地址都可以看到很多種樣式的Textarea。不同的的瀏覽器Textarea的默認樣式不同。我們可以用CSS來設計實現你的Textarea，就像其他普通的元素那樣：

textarea#styled{
    font-family: Tahoma, sans-serif;

    width: 600px;
    height: 120px;
    padding: 5px;

    border: 3px solid #ccc;
    background-image: url(bg.gif);
    background-repeat: no-repeat;
    background-position: bottom right;
}

在這種情況之下，Id值為"styled"的width和height被明確的設置，border和padding被設置，默認樣式改變了，background-image被設置。
Textarea也支持一些其他的特征來幫助你使其達到你的審美要求。是這樣的："onfocus"和"onblur"你可以在行內應用并且使用Javascript命令行來控制，就像這樣：

<textarea name="styled-textarea" id="styled" onfocus="this.value=''; setbg('#e5fff3');" onblur="setbg('white')">Enter your comment here...</textarea>

上述代碼當他正在被觸發(fā)的時候會改變淺綠色的背景色，觸發(fā)結束，背景色變回原來的顏色，就是因為在你的頁面中包含這么一小段簡單的JQuery代碼，從而實現了這個功能：

function setbg(color){
     document.getElementById("styled").style.background=color
}

無論是創(chuàng)建一個a.js文件導入，還是把他放到<script type="text/javascript">標簽中導入，都可以實現相同的效果。

接下來請看下面的簡單的demo：

Demo