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

 时间:2026-02-15 20:11:42

1、resize属性的选项参数:

none:用户无法调整元素的尺寸

both:用户可以调整元素的高度和宽度

horizontal:用户可调整元素的宽度

vertical:用户可调整元素的高度

注意:目前只有webkit核心浏览器才支持resize属性,且只支持等比例调整

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

2、resize属性默认是打开的,如果想关闭resize有两种方法:

1、通过resize属性禁止对元素进行缩放

textarea{resize: none;}

例子:

css部分: 

body{ background:goldenrod;}

       .box1{

           resize: none;

       }

html部分:

<textarea>resize属性默认是打开的</textarea>

<br/><br/><br/>

<textarea class="box1">resize禁止对元素缩放</textarea>

效果如图:

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

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

例子:

css部分:

.box4{

          max-height: 200px;

          min-height: 200px;

          height:200px;

          max-width: 200px;

          min-width: 200px;

          width:200px;

      }

html部分:

<textarea class="box4">现在文本宽的最大及最小宽、高</textarea>

效果如图(无法改变输入框的大小):

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

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

例子:

css部分:

<textarea class="box2">可调整元素的宽度</textarea>

<br/><br/><br/>

<textarea class="box3">可调整元素的高度</textarea>

html部分:

 .box2{

          resize: horizontal;

      }

      .box3{

          resize: vertical;

      }

效果如图:

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

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

  • 运用css3制作和调整网页上图形的渐变效果。
  • HTML标签target属性详解
  • css如何设置文本上下的行高
  • 利用html+css+js实现滑动门事件
  • HTML表单教程 表单框的实现
  • 热门搜索
    西北旅游 宜宾旅游 旅游学刊 孤柏渡飞黄旅游区 公司旅游 "旅游节目 " 越南旅游景点 香港旅游景点 三门峡旅游 旅游论文