CSS 修改 IOS 預設按鈕樣式

標籤：css   ios   

不知道大家在做移動端頁面的時候有沒遇到過在 IOS 端 一些按鈕顯示和安卓的截然不同，今天下午又有一個小夥在群裡問這個問題。我記得之前我也遇到過，今天給大家分享一下怎麼使用 CSS修改IOS的預設樣式。

650) this.width=650;" class="aligncenter size-full wp-image-980" src="http://www.aliyue.net/wp-content/uploads/2016/05/AIOS.jpg" alt="AIOS" width="487" height="296" style="height:auto;vertical-align:middle;border:0px;text-align:center;margin:0px auto;" />

========================================================

小月博客

http://www.aliyue.net

WEB

========================================================

第一：關於按鈕

首先這張圖是沒有用CSS做任何修飾的樣式：

650) this.width=650;" class="aligncenter size-full wp-image-978" src="http://www.aliyue.net/wp-content/uploads/2016/05/css_ios01.jpg" alt="css_ios01" width="183" height="219" style="height:auto;vertical-align:middle;border:0px;text-align:center;margin:0px auto;" />

然而我們希望的是這樣子的：

650) this.width=650;" class="aligncenter size-full wp-image-979" src="http://www.aliyue.net/wp-content/uploads/2016/05/css_ios02.jpg" alt="css_ios02" width="300" height="247" style="height:auto;vertical-align:middle;border:0px;text-align:center;margin:0px auto;" />

所以我們就要用我們的CSS來裝飾一下嘍。

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

input[type="button"], input[type="submit"], input[type="reset"] {     -webkit-appearance: none;}textarea { -webkit-appearance: none;}

如果還有圓角的問題，

.button{ border-radius: 0; }

第二：關於表單

我們在寫表單的時候會發現一些瀏覽器對錶單賦予了預設的樣式，如在Chorme瀏覽器下，文字框及下拉選擇框當載入焦點時，都會出現發光的邊框，並且在Firefox及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;}

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

< 1 >、去除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 修改 IOS 預設按鈕樣式

本文出自 “小月部落格” 部落格，請務必保留此出處http://aliyue.blog.51cto.com/11564403/1784929

CSS 修改 IOS 預設按鈕樣式