1. 程式人生 > > CSS去除input和textarea點選選中框

CSS去除input和textarea點選選中框

我們在寫表單的時候會發現一些瀏覽器對錶單賦予了預設的樣式,如在Chorme瀏覽器下,文字框及下拉選擇框當載入焦點時,都會出現發光的邊框,並且在火狐及谷歌瀏覽器下,多行文字框textarea還可以自由拖拽拉大,另外還有在IE10下,當文字框輸入內容後,在文字框的右側會出現一個小叉叉,等等。不容置疑,這些效果是在使用者體驗上得到了提升,但有些時候我們並不需要這些預設的樣式,那怎麼辦呢?下面我們就來分別看一下解決辦法。

1、去除Chrome等瀏覽器文字框預設發光邊框

1.
2
3
input:focus, textarea:focus {
outline: none;
}

當然這樣以來,當文字框載入焦點時,所有瀏覽器下的文字框的邊框都不會有顏色上及樣式上的變化了,但我們可以重新根據自己的需要設定一下,如:

1
2
3
4
input:focus,textarea:focus {
outline: none;
border: 1px solid #f60;
}

這樣的話,當文字框載入焦點時,邊框顏色就會變為橙色,給使用者一個反饋。

2、去除IE10+瀏覽器文字框後面的小叉叉

只需下面一句就ok了

1
2
3
input::-ms-clear {
display: none;
}

3、禁止多行文字框textarea拖拽

這樣按下面新增屬性多行文字框就不能拖拽放大縮小了:

1
2
3
textarea {
resize: none;
}

在這裡要提到一個屬性resize,這個是CSS3屬性,用於元素縮放,它可以取以下幾個值:

none 預設值

both 允許水平方向及垂直方向縮放

horizontal 只允許水平方向縮放

vertical 只允許垂直方向縮放

不僅可以針對textarea元素,對大多數元素都適用,如div等,在這裡不一一列舉,但與textarea不同的是,對div使用時需要加上一句overflow: auto;,也就是這樣才有效果:

1
2
3
4
div {
resize: both;
overflow: auto;
}

哦了,以上就是關於去除表單瀏覽器預設樣式的一些內容。