更多>>网页设计 Blog
来源:一度好 时间:2020-07-20 阅读:4491
通过 css 的 resize (vertical|horizontal|none) 属性控制 html 的 textarea 标签的右边框、下边框是否可以拖动。
默认情况下,html 的 textarea 标签多行文本框的右边框和下边框,均可以自由的拖动。
有些场景下,我们需要控制 textarea 的宽度保持不变或高度保持不变或宽高均保持不变。
下面就通过 CSS 样式的 resize 属性 来控制 textarea 边框的拖动状态。
resize 属性值:
vertical 表示可以调整元素的高度
horizontal 表示可以调整元素的宽度
none 表示不允许调整宽高
以设置默认宽度 210px,高度 50px 为例。
1、右边框和下边框,可以自由拖动
代码如下:
<textarea name="intro" id="intro" style="width:210px; height:50px;">右边框和下边框,可以自由拖动</textarea>
如图所示:
2、下边框,可以自由拖动
关键代码:resize:vertical; 代码如下:
<textarea name="intro" id="intro" style="width:210px; height:50px; resize:vertical;">下边框,可以自由拖动</textarea>
3、右边框,可以自由拖动
关键代码:resize:horizontal; 代码如下:
<textarea name="intro" id="intro" style="width:210px; height:50px; resize:horizontal;">右边框,可以自由拖动</textarea>
4、右边框和下边框,均不可拖动
关键代码:resize:none; 代码如下:
<textarea name="intro" id="intro" style="width:210px; height:50px; resize:none;">右边框和下边框,均不可拖动</textarea>
评论列表 |
暂时没有相关记录
|
发表评论