我們在寫表單的時候會發現一些瀏覽器對表單賦予了預設的樣式,如在Chorme瀏覽器下,文字框及下拉選擇框當載入焦點時,都會出現發光的邊框,並且在火狐及Google瀏覽器下,多行文字方塊textarea還可以自由拖曳拉大,另外還有在IE10下,當文字方塊輸入內容後,在文字方塊的右側會出現一個小叉叉,等等。不容置疑,這些效果是在使用者體驗上得到了提升,但有些時候我們並不需要這些預設的樣式,那該怎麼辦呢?下面我們就來分別看一下解決方法。
1、移除Chrome等瀏覽器文字方塊預設發光邊框
input:focus, textarea:focus { outline: none; }
去掉高光樣式:
input:focus{ -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-user-modify:read-write-plaintext-only; }
當然這樣以來,當文字方塊載入焦點時,所有瀏覽器下的文字方塊的邊框都不會有顏色上及樣式上的變化了,但我們可以重新根據自己的需求設定一下,如:
input:focus,textarea:focus { outline: none; border: 1px solid #f60; }
這樣的話,當文字方塊載入焦點時,邊框顏色就會變成橘色,給使用者一個回饋。
2、去除IE10+瀏覽器文字方塊後面的小叉叉
只需要下面一句就ok了
input::-ms-clear { display: none; }
3、禁止多行文字方塊textarea拖曳
這樣按下面新增屬性多行文字方塊就不能拖曳放大縮小了:
textarea { resize: none; }
#在這裡要提到一個屬性resize,這個是CSS3屬性,用於元素縮放,它可以取以下幾個值:
none 預設值
both 允許水平方向及垂直方向縮放
#horizontal 只允許水平方向縮放
vertical 只允許垂直方向縮放
不僅可以針對textarea元素,對大多數元素都適用,如div等,這裡不一一列舉,但與textarea不同的是,對div使用時需要加上一句overflow: auto;,也就是這樣才有效果:
div { resize: both; overflow: auto; }
以上是如何使用css去除瀏覽器對表單賦予的預設樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章!