關閉safari瀏覽器button默認樣式

前兩天又遇到一個頭疼的問題，在Chrome上調試好的樣式，去到手機上打開，傻了。。。

這是什麼鬼...
搜了一下,才知道這是appearance屬性搞的鬼。。

。

比方你想讓一個div擁有button的樣式。可以這麼寫

div {
        appearance: button;
        -moz-appearance:button; /* Firefox */
        -webkit-appearance:button; /* Safari 和 Chrome */
    }

因此取消掉默認的button樣式，本身寫的才幹顯示出來

input,
    button {
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
    }

注意瀏覽器支持
所有主流瀏覽器都不支持 appearance 屬性。
Firefox 支持替代的 -moz-appearance 屬性。
Safari 和 Chrome 支持更換 -webkit-appearance 屬性。

版權聲明：本文博主原創文章，博客，未經贊成不得轉載。