小程式checkbox和radio樣式修改

2021-09-26 00:18:00 字數 2353 閱讀 2598

1、沒有修改過的預設(禁用)樣式:

2、 修改預設樣式(大小顏色圓角)

/* 修改預設樣式 */

3、修改checked狀態時的樣式。為什麼不直接在這裡修改背景色,因為所有都disabled了,checked的背景色只能修改中間的打鉤的部分。

/* 修改checked樣式 */

4、修改禁用且checked的樣式:

/* 修改禁用且checked的樣式 */

/* 修改預設樣式 */

checkbox .wx-checkbox-input,radio .wx-radio-input

/* 修改checked樣式 */

radio .wx-radio-input.wx-radio-input-checked::before,

checkbox .wx-checkbox-input.wx-checkbox-input-checked::before

/* 修改禁用且checked的樣式 */

radio .wx-radio-input.wx-radio-input-checked.wx-radio-input-disabled,

checkbox .wx-checkbox-input.wx-checkbox-input-checked.wx-checkbox-input-disabled

–2019.8更新

******************************

2020.7.2更新

/* 修改多選原生樣式 */

checkbox .wx-checkbox-input.wx-checkbox-input

/* 修改單選高亮原生樣式 */

radio .wx-radio-input.wx-radio-input-checked

/* 修改單選原生樣式 */

radio .wx-radio-input.wx-radio-input

/* 修改多選高亮原生樣式 */

checkbox .wx-checkbox-input.wx-checkbox-input-checked

checkbox .wx-checkbox-input.wx-checkbox-input-checked::before

radio .wx-radio-input.wx-radio-input-disabled,

checkbox .wx-checkbox-input.wx-checkbox-input-disabled

/* 選中後的 對勾樣式 (白色對勾 可根據ui需求自己修改) */

radio .wx-radio-input.wx-radio-input-checked::before

單選

多選

微信小程式checkbox和radio重置樣式

未選中的 背景樣式 checkbox wx checkbox input 選中後的 背景樣式 checkbox wx checkbox input.wx checkbox input checked 選中後的 對勾樣式 checkbox wx checkbox input.wx checkbox i...

微信小程式更改checkbox和radio樣式

未選中的 背景樣式 checkbox wx checkbox input 選中後的 背景樣式 checkbox wx checkbox input.wx checkbox input checked 選中後的 對勾樣式 checkbox wx checkbox input.wx checkbox i...

微信小程式 checkbox元件

checkarr 中國 checkboxchange function e this.setdata 由於e.detail.value和this.data.items都是陣列元素進行屬性對比查詢,所以此處採用了雙迴圈。foreach迴圈不能在迴圈中跳出,所以在迴圈this.data.items時採用...