微信小程式去除Button預設樣式

2022-04-01 20:18:57 字數 462 閱讀 4287

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

(一)實現效果

1、實現前(預設樣式):

2、實現後(去除預設邊框和背景色):

(二)實現過程

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

button::after

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

button

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

微信小程式 button 元件

button 的屬性 size 型別 字串 按鈕的大小 屬性值 default 預設的 mini 小尺寸 type 型別 字串 按鈕的樣式型別 屬性值 default 預設的 primary 綠色的 warn 紅色的 plain 型別 布林 按鈕是否鏤空,背景色透明 disabled 型別 布林 是...

微信小程式 隱藏button邊框

想使用button自帶的disable屬性和效果,但又不需要button顯示邊框線 button控制項有一條淡灰色的邊框,在控制項上了樣式border radius 0 無法讓button邊框隱藏 如下 解決方案發現button控制項有乙個偽元素 after 這偽元素有border屬性,預設為bor...

微信小程式button元件新手教程

button按鈕元件說明 button,顧名思義,按鈕,類似於html的button標籤。我們可以設定按鈕的屬性,比如字型顏色大小,背景顏色等,可以給按鈕繫結事件,使用者點選時會觸發事件。button按鈕元件示例 執行效果如下 下面是wxml 怎麼飛?點選 按鈕 即飛 下面是js page onlo...