设计一个完美的Textarea[译文]

原文地址

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>

上述代码当他正在被触发的时候会改变浅绿色的背景色，触发结束，背景色变回原来的颜色，就是因为在你的页面中包含这么一小段简单的JQuery代码，从而实现了这个功能：

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

无论是创建一个a.js文件导入，还是把他放到<script type="text/javascript">标签中导入，都可以实现相同的效果。

接下来请看下面的简单的demo：

Demo