css去掉iPhone iPad預設按鈕樣式

2021-07-22 15:03:54 字數 1526 閱讀 3219

但是正確的應該是醬紫滴！~：

只要在樣式裡面加一句去掉css去掉iphone、ipad的預設按鈕樣式就可以了！~

input


[type="button"], input


[type="submit"], input


[type="reset"]


textarea


;}   


如果還有圓角的問題，


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

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

input


:focus, textarea


:focus
去掉高光樣式：

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

input


:focus,textarea


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

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

只需下面一句就ok了

input


::-ms-clear
3、禁止多行文字框textarea拖拽這樣按下面新增屬性多行文字框就不能拖拽放大縮小了：

textarea
在這裡要提到乙個屬性resize，這個是css3屬性，用於元素縮放，它可以取以下幾個值：

none 預設值

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

horizontal 只允許水平方向縮放

vertical 只允許垂直方向縮放

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

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

css去掉iPhone iPad預設按鈕樣式

最近用html5 寫了個手機站，在測試的時候發現在蘋果手機上的乙個問題。所有的按鈕都被了蘋果自帶的樣式給替換了。效果如下 但是正確的應該是醬紫滴！只要在樣式裡面加一句去掉css 去掉iphone ipad的預設按鈕樣式就可以了！input type button input type submit ...

css去掉iPhone iPad預設按鈕樣式

最近用html5 寫了個手機站，在測試的時候發現在蘋果手機上的乙個問題。所有的按鈕都被了蘋果自帶的樣式給替換了。效果如下 但是正確的應該是醬紫滴！只要在樣式裡面加一句去掉css 去掉iphone ipad的預設按鈕樣式就可以了！input type button input type submit ...

css去掉iPhone iPad預設按鈕樣式

只要在樣式裡面加一句去掉css去掉iphone ipad的預設按鈕樣式就可以了！input type button input type submit input type reset 我們在寫表單的時候會發現一些瀏覽器對表單賦予了預設的樣式，如在chorme瀏覽器下，文字框及下拉選擇框當載入焦點時...