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

創(chuàng)新互聯(lián)2013年至今，先為銅陵等服務(wù)建站，銅陵等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為銅陵企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

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

小月博客

http://www.aliyue.net

WEB

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

第一：關(guān)于按鈕

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

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

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

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

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

如果還有圓角的問題，

.button{ border-radius: 0; }

第二：關(guān)于表單

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

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

input:focus, textarea:focus {
    outline: none;
}

去掉高光樣式：

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

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

input:focus,textarea:focus {
 outline: none;
 border: 1px solid #f60;
}

這樣的話，當(dāng)文本框載入焦點時，邊框顏色就會變?yōu)槌壬o用戶一個反饋。

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

只需下面一句就ok了

input::-ms-clear {
    display: none;
}

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

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

textarea {
 resize: none;
}

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

• none 默認值

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

• horizontal 只允許水平方向縮放

• vertical 只允許垂直方向縮放

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

div {
 resize: both;
 overflow: auto;
}

轉(zhuǎn)載請注明：小月博客  CSS 修改 IOS 默認按鈕樣式

當(dāng)前標(biāo)題：CSS修改IOS默認按鈕樣式
當(dāng)前地址：http://jinyejixie.com/article46/posjeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、全網(wǎng)營銷推廣、網(wǎng)站制作、網(wǎng)站策劃、App開發(fā)、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)