CSS3如何自定义textarea的属性

在chrome下textarea默认可以通过自带调整大小的按钮,调整垂直和水平拉伸textarea。
然而,我们可以根据我们的喜好控制:
1、我们可以控制textarea如何调整。
2、我们可以通过伪元素,替换默认的调整按钮图标。

控制调整方式

resize属性分别是both(可以水平和垂直拉伸)、horizontal(水平拉伸)、vertical(垂直拉伸)、none(禁止水平和水平拉伸)。

textarea { resize: horizontal; };
textarea { resize: vertical; };
textarea { resize: none; };

同时我们还可以通过max-height、min-height、max-width、min-width来初始化textarea的宽高。

textarea { 
resize:vertical;
max-height:400px;
min-height:100px;
}

通过伪元素,替换默认的调整按钮图标

我们可以根据设计稿的不同调整按钮的图标,但是这个只针对Chrome浏览器下。

改变按钮背景颜色

::-webkit-resizer{ 
background-color: black;
}

改变按钮图片

::-webkit-resizer{ 
background-image: url(images/resizer.png);
}

DEMO演示

DEMO

参考文章:
http://www.developerdrive.com/2013/10/how-to-customize-textareas/