微信小程序去除Button默認樣式


在小程序開發過程中,使用率蠻高的組件button,因為經常要去除默認樣式,然后再自定義樣式,所以經常寫,自己也總結分享一下簡單的實現步驟。

(一)實現效果
1、實現前(默認樣式):


2、實現后(去除默認邊框和背景色):


(二)實現過程
1、使用::after 偽類選擇器,因為button的邊框樣式是通過::after方式實現的,如果在button上定義邊框就會出現兩條邊框線,所以我們可以使用::after的方式去覆蓋默認值。

button::after {
   border: none;
}

2、還需要在將按鈕背景色設置為白色,因為按鈕默認背景色是灰色的。

button {
background-color: #fff;
}

這樣兩步就可以搞定小程序按鈕默認樣式了,只是相當於一個文本的樣式,還是有很多button的默認樣式沒有去除的,這個需要根據個人需求來設置的,這里不過多說明,如果需要自定義可以在按鈕上一個類選擇器就可以搞定。



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM