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

原文地址

textarea 是页面上我们可以实现的一种元素类型,在评论框,交流框,或者跳转地址都可以看到很多种样式的Textarea。不同的的浏览器Textarea的默认样式不同。我们可以用CSS来设计实现你的Textarea,就像其他普通的元素那样:

设计一个完美的Textarea[译文]_第1张图片
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命令行来控制,就像这样:


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

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

无论是创建一个a.js文件导入,还是把他放到

你可能感兴趣的:(设计一个完美的Textarea[译文])