CSS3 重置iphone瀏覽器按鈕input,select等表單元素的默認樣式

發(fā)布時間：2014-10-11 16:06:41 作者：佚名

之前寫了一個登錄表單頁面，再iphone上測試遇到了一些奇怪的問題：表單中的input[type="submit"]按鈕在iPhone的safari瀏覽器下會出現圓角的情況；input[type="text"]文本輸入框會有內陰影，這些問題該怎么處理呢？請看下文

今天在公司寫了一個登錄頁面效果，讓我碰到一個怪異的問題——“表單中的input[type="submit"]和input[type="reset"]按鈕在iPhone的safari瀏覽器下圓角有一個bug”。下面我來簡單的描述一下這個bug的樣子：

初載入頁面后，表單中的input[type="submit"]和input[type="reset"]按鈕渲染成下圖的樣子：

2012122411191049
奇怪的是你點擊以后就會正常：

2012122411191050

或許很多同學會認為我的樣式代碼沒寫好，那么想讓大家知道是怎么一回事，先來看看我寫的代碼：

input[type="submit"]和input[type="reset"]樣式代碼：

復制代碼

代碼如下:

.form-actions input{
width: 30%;
cursor: pointer;
background: rgb(61, 157, 179);
padding: 8px 5px;
font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;
color: #fff;
font-size: 24px;
margin: 5px;
border: 1px solid rgb(28, 108, 122);
margin-bottom: 10px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
border-radius: 3px;
box-shadow:0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
0px 0px 0px 3px rgb(254, 254, 254),
0px 5px 3px 3px rgb(210, 210, 210);
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.form-actions input:hover{
background: rgb(74, 179, 198);
}
.form-actions input:active,
.form-actions input:focus{
background: rgb(40, 137, 154);
position: relative;
top: 1px;
border: 1px solid rgb(12, 76, 87);
box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
}

這樣的代碼在瀏覽器中瀏覽是完全沒有問題的：

注：請使用safari測試上面代碼。
可是上面的代碼就在iPhone的Safari瀏覽器下出開頭所陳述的問題。一下真不好如何動手解決，因為從來沒有接觸過，所以就一直沒有碰到過。但問題出了，就要想辦法解決，于是在GG上搜索“input submit for iPhone”，還真找到了問題所在。 Keir Whitaker 在Styling Submit Buttons for Mobile Safari 中介紹的內容和我碰到的問題可真是一模一樣，按其方法在樣式中加入：

復制代碼

代碼如下:

.form-actions input{
...
-webkit-appearance: none;
}

更新到iPhone一看，真爽，問題解決了。

原來問題出在這里，iPhone上的safari解析input[type="submit"]和input[type="reset"]按鈕會以蘋果瀏覽器的默認UI渲染，這樣就出現我剛才那種現像，我們在樣式中明確的設置了button的圓角值，但到iPhone的safari上就不生效了。要想讓他生效，就需要在樣式中明確的指名：

復制代碼

代碼如下:

.form-actions input{
...
-webkit-appearance: none; }

在不同的“-webkit-appearance”選值情況下，button所渲染的效果是不一樣的，詳細的測試代碼大家可使用safari瀏覽器點擊這里。有關于“-webkit-appearance”的詳細介紹，這回算是知道了，最后我建議大家，我們可以直接在“reset.css”樣式文件中加處這么一句：

復制代碼

代碼如下:

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

這樣一來就不會為這樣的問題頭痛了。

如果你還沒有碰到，或者你也在開發(fā)移動端web，都希望你記住這個小技巧，因為當你在制作中碰到這樣的問題時，不會為此抓破頭皮，能解決你問題。最后希望大家喜歡這篇文章，如果你覺得對你有所幫助，可以推薦給你的朋友，謝謝閱讀。