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

2022-08-19 02:57:10 字數 503 閱讀 8104

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

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

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

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

這顯然不科學。

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

這兩個宣告分別是:

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

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

在為移動裝置製作網頁的過程中,你可能會遇到下述奇怪的現象 當你為乙個按鈕設定樣式,並在瀏覽器開啟模擬器檢視效果時,一切都很美好。但當你使用真機測試時,你的按鈕卻變成了下面這個樣子 而且即使你使用終極禁術border radius 0 important也還是沒用。這是因為在移動裝置中,各瀏覽器為一些...

修改video標籤自帶按鈕的預設樣式

我們來看一下 video 的內部構造 chrome 下,開發者工具 setting preferences elements 勾選 show user agent shadow dom 再回來看,已經可以看到 video 的內部結構了 瞄一眼,有沒有看到很熟悉的 webkit media contr...

如何修改elementUI的預設樣式

在開發中我們發現修改elementui樣式的時候,新增了scoped的元件修改樣式是無效的。首先我們要了解一下scoped是什麼?官網是這樣說的 當 style 標籤有scoped屬性時,他的css只作用於當前元件的元素。使用scoped後,父元件的樣式不會滲透到子元件中。不過乙個子元件的根節點會同...