最近用HTML5寫了個(gè)手機(jī)站，在測(cè)試的時(shí)候發(fā)現(xiàn)在蘋果手機(jī)上的一個(gè)問(wèn)題。所有的按鈕都被了蘋果自帶的樣式給替換了。效果如下：

但是正確的應(yīng)該是醬紫滴！~

只要在樣式里面加一句去掉css去掉iPhone、iPad的默認(rèn)按鈕樣式就可以了！~

input[type="button"], input[type="submit"], input[type="reset"] {

-webkit-appearance: none;

}

textarea {  -webkit-appearance: none;}   

如果還有圓角的問(wèn)題，

.button{ border-radius: 0; } 

我們?cè)趯懕韱蔚臅r(shí)候會(huì)發(fā)現(xiàn)一些瀏覽器對(duì)表單賦予了默認(rèn)的樣式，如在Chorme瀏覽器下，文本框及下拉選擇框當(dāng)載入焦點(diǎn)時(shí)，都會(huì)出現(xiàn)發(fā)光的邊框，并且在火狐及谷歌瀏覽器下，多行文本框textarea還可以自由拖拽拉大，另外還有在IE10下，當(dāng)文本框輸入內(nèi)容后，在文本框的右側(cè)會(huì)出現(xiàn)一個(gè)小叉叉，等等。不容置疑，這些效果是在用戶體驗(yàn)上得到了提升，但有些時(shí)候我們并不需要這些默認(rèn)的樣式，那怎么辦呢？下面我們就來(lái)分別看一下解決辦法。

1、去除Chrome等瀏覽器文本框默認(rèn)發(fā)光邊框

去掉高光樣式：

input:focus{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-user-modify:read-write-plaintext-only;
}

當(dāng)然這樣以來(lái)，當(dāng)文本框載入焦點(diǎn)時(shí)，所有瀏覽器下的文本框的邊框都不會(huì)有顏色上及樣式上的變化了，但我們可以重新根據(jù)自己的需要設(shè)置一下，如：

這樣的話，當(dāng)文本框載入焦點(diǎn)時(shí)，邊框顏色就會(huì)變?yōu)槌壬?，給用戶一個(gè)反饋。

2、去除IE10+瀏覽器文本框后面的小叉叉

只需下面一句就ok了

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

這樣按下面添加屬性多行文本框就不能拖拽放大縮小了：

在這里要提到一個(gè)屬性resize，這個(gè)是CSS3屬性，用于元素縮放，它可以取以下幾個(gè)值：

none 默認(rèn)值

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

horizontal 只允許水平方向縮放

vertical 只允許垂直方向縮放

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

哦了，以上就是關(guān)于去除表單瀏覽器默認(rèn)樣式的一些內(nèi)容。