如何通过css3来改变输入框的大小

如何通过css3来改变输入框的大小

对于像这样可以设置overflow属性的元素，css3提供了一个resize的方法，让用户可以通过拖拽来改变框体的大小。</p><p>注意：目前只有webkit核心浏览器才支持resize属性，且只支持等比例调整</p><p>resize属性的选项参数：</p><p>none：用户无法调整元素的尺寸</p><p>both：用户可以调整元素的高度和宽度</p><p>horizontal：用户可调整元素的宽度</p><p>vertical：用户可调整元素的高度</p><p>注意：目前只有webkit核心浏览器才支持resize属性，且只支持等比例调整</p><p>resize属性默认是打开的，如果想关闭resize有两种方法：</p><p>1、通过resize属性禁止对元素进行缩放</p><p>textarea{resize: none;}</p><p>例子：</p><p>css部分：</p><p>body{ background:goldenrod;}</p><p> .box1{</p><p> resize: none;</p><p> }</p><p>html部分：</p><p><textarea>resize属性默认是打开的

resize禁止对元素缩放

效果如图：

关闭resize第二种方法：限制文本框的最大及最小宽、高

例子：

css部分：

.box4{

max-height: 200px;

min-height: 200px;

height:200px;

max-width: 200px;

min-width: 200px;

width:200px;

}

html部分：

现在文本宽的最大及最小宽、高

效果如图（无法改变输入框的大小）：

只改变输入框的高度或宽度

例子：

css部分：

可调整元素的宽度

可调整元素的高度

html部分：

.box2{

resize: horizontal;

}

.box3{

resize: vertical;

}

效果如图：