如何通過css3來改變輸入框的大小
2 回答
ABOUTYOU
TA貢獻1812條經(jīng)驗 獲得超5個贊
對于像<textarea>這樣可以設(shè)置overflow屬性的元素，css3提供了一個resize的方法，讓用戶可以通過拖拽來改變框體的大小。
注意：目前只有webkit核心瀏覽器才支持resize屬性，且只支持等比例調(diào)整
一、resize改變輸入框的大小
resize屬性的選項參數(shù)：
none：用戶無法調(diào)整元素的尺寸
both：用戶可以調(diào)整元素的高度和寬度
horizontal：用戶可調(diào)整元素的寬度
vertical：用戶可調(diào)整元素的高度
注意：目前只有webkit核心瀏覽器才支持resize屬性，且只支持等比例調(diào)整
二、resize屬性默認是打開的
如果想關(guān)閉resize有兩種方法：
1、通過resize屬性禁止對元素進行縮放。
textarea{resize: none;}
例子：
css部分：
1 2 3 4 5 6 | body{ background:goldenrod; } .box1{ resize: none; } |
html部分：
1 2 3 | <textarea>resize屬性默認是打開的</textarea>
<textarea class="box1">resize禁止對元素縮放</textarea> |
2、限制文本框的最大及最小寬、高。
例子：
css部分：
1 2 3 4 5 6 7 8 | .box4{ max-height: 200px; min-height: 200px; height: 200px; max-width: 200px; min-width: 200px; width: 200px; } |
html部分：
1 | <textarea class="box4">現(xiàn)在文本寬的最大及最小寬、高</textarea> |
三、如何只改變輸入框的高度或?qū)挾?/strong>
例子：
html部分：
1 2 3 | <textarea class="box2">可調(diào)整元素的寬度</textarea>
<textarea class="box3">可調(diào)整元素的高度</textarea> |
css部分：
1 2 3 4 5 6 | .box2{ resize: horizontal; } .box3{ resize: vertical; } |
慕斯709654
TA貢獻1840條經(jīng)驗 獲得超5個贊
通過css3來改變輸入框的大小
<form>
<input name="" type="text" style="width:200px; height=100px" />
</form>
- 2 回答
- 0 關(guān)注
- 1505 瀏覽
添加回答
舉報
0/150
提交
取消