-webkit-appearance: none;

標籤：

今天在web群裡聊天的時候，發現了這個東東，我好像不怎麼認識他，於是查了下關於他的資訊：

抄的例子,

-----------

IOS環境下的按鈕都是經過美化的，但通常我們在設計web app的時候不需要這些看上去老土的樣式，所以，去除這些顯得很有必要。

下面這句代碼就是重設這些樣式的：

-webkit-appearance: none;

通常，我們在寫移動端的web開發時，會zaicommon.css中添加以下CSS代碼來：

input[type=button]{-webkit-appearance:none;outline:none}
----------------------------
但是我覺得他好像還有些確定，並不是那麼完美。如下：
-------------------------
-webkit-appearance:none導致無法擷取checkbox值

這個BUG發生的背景有點複雜。大概就是一個Form表單，要用Validation Plugin驗證，Ajax提交。結果發現在Webkit瀏覽器下無論怎樣都阻止這個form在提交的時候重新整理整個頁面。

最後總算抓到元兇是checkbox上的-webkit-appearance:none屬性。

-webkit-appearance會將webkit瀏覽器中的元素預設樣式去除。checkbox在這個屬性下就直接隱藏掉了。然後用JS擷取checkbox值時Webkit瀏覽器會報很奇怪的錯誤。給這個元素重新賦上-webkit-appearance:checkbox就不會報錯了。

其他的的表單元素以及其他的情況並未測試。這個問題在Chrome和Safari中都會出現，應該是Webkit引擎的問題。

--------------------------

-webkit-appearance: none;