如何修改行動裝置按鈕預設樣式

來源:互聯網
上載者:User

標籤:checkbox   分享圖片   式表   develop   測試   科學   方式   eve   check   

在為行動裝置製作網頁的過程中,你可能會遇到下述奇怪的現象:當你為一個按鈕設定樣式,並在瀏覽器開啟模擬器查看效果時,一切都很美好。

但當你使用真機測試時,你的按鈕卻變成了下面這個樣子:

而且即使你使用終極禁術 border-radius: 0 !important 也還是沒用。

這是因為在行動裝置中,各瀏覽器為一些基本控制項(buttoncheckboxscrollbarbutton-up)提供了一套符合原生系統介面風格的樣式,這些樣式是隱藏的,但優先順序卻是最高的,高到你即使使用禁術 !important 也無法超越。

這顯然不科學。

別怕,我們有兩個非常靠譜的樣式聲明可以告知瀏覽器完全拋棄控制項預設的樣式,以正常的方式計算我們的樣式表。

這兩個聲明分別是:

  • -moz-appearance: none:用來取消基於 Gecko 引擎的瀏覽器(如Firefox)所提供的原生系統控制項樣式;
  • -webkit-appearance: none:用來取消基於 Webkit (如 Safari)和 Blink(如Chrome,Opera)引擎的瀏覽器所提供的原生系統控制項樣式;

所以,你明白當你遇到文章開篇出現的奇怪現象應該怎麼做了吧?直接兩個聲明走起啊少年!

最後,你也許會好奇,appearance 還有什麼屬性值,戳這裡看看MDN上怎麼說吧。

PS: 戳這裡,發現更多可能。

如何修改行動裝置按鈕預設樣式

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.