更多>>网页设计 Blog

如何控制 textarea 的边框只能左右拖动、上下拖动或不能拖动

通过 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>


評論列表

暫時沒有相關記錄

發表評論

用來接收審核回複提醒,請認真填寫

captcha
看不清?點擊圖片換一張