css防拖拽文本框是指在網頁中添加css樣式,來禁止用戶拖拽文本框的功能。
我們可以使用以下的css樣式來實現防拖拽文本框:
textarea{ resize: none; /* 禁止拖拽 */ -webkit-user-select:none; /* 禁止選中文本(谷歌瀏覽器)*/ -moz-user-select:none; /* 禁止選中文本(火狐瀏覽器)*/ -ms-user-select:none; /* 禁止選中文本(IE瀏覽器及Edge)*/ user-select:none; /* 禁止選中文本 */ }
使用該樣式后,用戶便不能通過拖拽來調整文本框的大小;同時,該樣式還會禁止用戶選中文本,保證了網頁的整潔程度。
需要注意的是,該樣式只是隱藏了拖拽的按鈕,但用戶仍然可以通過調整瀏覽器窗口的大小,來改變文本框的大小。因此,要保證網頁的美觀和用戶體驗,我們可以采用IE的特有屬性,來限制文本框的大小。
textarea{ resize: none; /* 禁止拖拽 */ -webkit-user-select:none; /* 禁止選中文本(谷歌瀏覽器)*/ -moz-user-select:none; /* 禁止選中文本(火狐瀏覽器)*/ -ms-user-select:none; /* 禁止選中文本(IE瀏覽器及Edge)*/ user-select:none; /* 禁止選中文本 */ max-height: 100px; /* 最大高度 */ max-width: 200px; /* 最大寬度 */ min-height: 50px; /* 最小高度 */ min-width: 100px; /* 最小寬度*/ }
使用以上屬性,我們可以限制文本框的大小,從而保證了網頁的整潔和美觀。
下一篇css陰影 透明度