uniapp动态修改样式_uniapp checkbox修改自带样式

项目中遇到特此记录下

老规矩废话不多说直接上代码

直接重写他的样式在页面上

uni-checkbox .uni-checkbox-input {

margin-right: 8upx;

-webkit-appearance: none;

appearance: none;

outline: 0;

border: 1px solid #9F9F9F ;

border-radius: 50%;

background-color: #fff;

width: 30upx;

height: 30upx;

position: relative;

}

checkbox::before {

font-family: "cuIcon";

content: "\e645";

position: absolute;

color: #FFFFFF !important;

top: 50%;

margin-top: -16upx;

right: 10upx;

font-size: 32upx;

line-height: 32upx;

pointer-events: none;

-webkit-transform: scale(1, 1);

transform: scale(1, 1);

-webkit-transition: all 0.3s ease-in-out 0s;

transition: all 0.3s ease-in-out 0s;

z-index: 9;

}

uni-checkbox:not([disabled]) .uni-checkbox-input:hover {

border-color: #BE8100;

}

uni-switch.green[checked] .wx-switch-input, uni-switch[checked] .wx-switch-input, uni-checkbox.green[checked] .wx-checkbox-input, uni-checkbox[checked] .wx-checkbox-input, uni-radio.green[checked] .wx-radio-input, uni-radio[checked] .wx-radio-input, uni-switch.green.checked .uni-switch-input, uni-switch.checked .uni-switch-input, uni-checkbox.green.checked .uni-checkbox-input, uni-checkbox.checked .uni-checkbox-input, uni-radio.green.checked .uni-radio-input, uni-radio.checked .uni-radio-input {

background-color: #BE8100 !important;

border-color: #BE8100 !important;

color: #ffffff !important;

}