在小程序開發過程中,使用率蠻高的組件button,因為經常要去除默認樣式,然后再自定義樣式,所以經常寫,自己也總結分享一下簡單的實現步驟。
(一)實現效果
1、實現前(默認樣式):
2、實現后(去除默認邊框和背景色):
(二)實現過程
1、使用::after 偽類選擇器,因為button的邊框樣式是通過::after方式實現的,如果在button上定義邊框就會出現兩條邊框線,所以我們可以使用::after的方式去覆蓋默認值。
button::after {
border: none;
}
2、還需要在將按鈕背景色設置為白色,因為按鈕默認背景色是灰色的。
button {
background-color: #fff;
}
這樣兩步就可以搞定小程序按鈕默認樣式了,只是相當於一個文本的樣式,還是有很多button的默認樣式沒有去除的,這個需要根據個人需求來設置的,這里不過多說明,如果需要自定義可以在按鈕上一個類選擇器就可以搞定。