使用 iPhone 上的瀏覽器去瀏覽網頁的時候，按鈕總是顯示超大圓角且顏色由上而下漸變的樣式，顯得超級惡心，而且文本框也會有一定的圓角，但是我們自己定義 border-radius 也沒有效果，經過搜索發現這是 webikt 內核瀏覽器通過私有屬性 -webkit-appearance 對控件設置了默認樣式。此時的解決辦法為：
input[type=submit],input[type=reset],input[type=button],input[type=text]{-webkit-appearance:none;}
其中，-webkit-appearance:none是去除input默認樣式。
此時雖然去掉了按鈕顯示超大圓角以及顏色由上而下漸變的惡心樣式，但按鈕的圓角依然存在，所以還需在樣式中加入：border-radius:0方可。注意，只能是border-radius:0;而不能使用border-radius:none，因為使用了border-radius:none，IPhone瀏覽器貌似不識別，依然會給input一個大概5像素左右的圓角。若需要給表單設置圓角比如5px的話，那就自行設置border-radius:5px即可。
我們在寫表單的時候會發現一些瀏覽器對表單賦予了默認的樣式，如在Chorme瀏覽器下，文本框及下拉選擇框當載入焦點時，都會出現發光的邊框，並 且在火狐及谷歌瀏覽器下，多行文本框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;
}
以上就是關於去除表單瀏覽器默認樣式的一些內容。