css3 appearance在iphone上面的問題

標籤：

最近在做項目的時候，發現iphone上中

<input type="button">在修改了css樣式之後還是保留內建的一些屬性，然後在安卓手機上不會出現這樣的問題，

在網上找了一些資料，

使用“-webkit-appearance: none; ”來改變按鈕在iPhone下的預設風格，其實我們可以反過來思路，

使用“appearance”屬性，來改變任何元素的瀏覽器預設風格，簡單的說，

你可以使用“appearance”屬性將“段落p”渲染成button的風格，也可以渲染成“輸入框”、“選擇框”等效果。

大家都知道每個瀏覽器對HTML元素渲染都不一樣，比如說“button”，在chrome和ff中，渲染出來的效果都是不盡相同的。

這樣一來就有了今天這個思路，利用瀏覽器的對元素的預設渲染風格，我們可以使用“appearance”屬性對任何元素的渲染風格改變，

最簡單的來說，我要把“a”連結預設顯示成“按鈕”風格，那麼我們可以使用“appearance”設定為“button”。

 

“appearance”功能聽起來蠻大的，不過可惜的是，目前各個瀏覽器廠商各自為政，還無法達到統一的標準，

至今天也只有兩個核心的瀏覽器可以使用，其一是“webkit”，其二是“ff”的，也就是說在使用“appearances”時，需要加上各瀏覽器廠首碼。

appearance使用方法：

.elmClass{-webkit-appearance: value;-moz-appearance: value;appearance: value;}

　　

css3 appearance在iphone上面的問題