如何使用css去除瀏覽器對表單賦予的預設樣式

我們在寫表單的時候會發現一些瀏覽器對表單賦予了預設的樣式，如在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 允許水平方向及垂直方向縮放

#horizo​​ntal 只允許水平方向縮放

vertical 只允許垂直方向縮放

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

div {
    resize: both;
    overflow: auto;
}

   

以上是如何使用css去除瀏覽器對表單賦予的預設樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！