win10优化大师免费版,广州网站优化建设,黔东南购物网站开发设计,湖北住房城乡建设厅网站1、修改uni-data-checkbox多选框的样式为单选框的样式 我原先是用的单选#xff0c;但是单选并不支持选中后#xff0c;再次点击取消选中#xff1b;所以我改成了多选#xff0c;然后改变多选样式#xff0c;让他看起来像单选 在所在使用的页面上修改样式即可
uni-d…1、修改uni-data-checkbox多选框的样式为单选框的样式 我原先是用的单选但是单选并不支持选中后再次点击取消选中所以我改成了多选然后改变多选样式让他看起来像单选 在所在使用的页面上修改样式即可
uni-data-checkbox multiple selectedColor#2979ff selectedTextColor#000 v-modelagree:localdataagreedatalabelcheckbox /view我已阅读并同意text classcol-g clickhandleXI《用户协议》/texttext classcol-g clickhandleYX《隐私协议》/text/view/label/uni-data-checkbox
style langscss//修改多选框的样式为单选样式.uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checkbox__inner .checkbox__inner-icon {opacity: 1;background-color: #2979ff !important;}.uni-data-checklist .checklist-group .checklist-box .checkbox__inner .checkbox__inner-icon {width: 8px !important;height: 8px !important;border-radius: 10px !important;top: 3px !important;left: 3px !important;height: 8px;width: 4px;border: 0px solid #2979ff !important;}.uni-data-checklist .checklist-group .checklist-box .checkbox__inner {border-radius: 8px !important;display: flex;flex-shrink: 0;box-sizing: border-box;justify-content: center;align-items: center;position: relative;width: 16px;height: 16px;border: 1px solid #DCDFE6;border-radius: 16px;background-color: #fff !important;z-index: 1;}
/style 2、修改checkbox的样式 checkbox-grouplabel styledisplay: flex;checkbox valueagree classcheckbox /view我已阅读并同意text classcol-g clickhandleYH《用户协议》/text及text classcol-g clickhandleYS《隐私协议》/text/view/label/checkbox-group 样式必须得写在app.vue中
.login_container {//自定义checkbox的样式 元素使用的时候就是使用类名checkbox checkbox.checkbox .wx-checkbox-input,checkbox.checkbox .uni-checkbox-input {border-radius: 8px !important;display: flex;flex-shrink: 0;box-sizing: border-box;justify-content: center;align-items: center;position: relative;width: 16px;height: 16px;border: 1px solid #DCDFE6;border-radius: 16px;background-color: #fff !important;z-index: 1;}// 选中后的 对勾样式 checkbox.checkbox .uni-checkbox-input-checked::before,checkbox.checkbox .wx-checkbox-input-checked::before {width: 8px;height: 8px;border-radius: 10px !important;line-height: 20px;text-align: center;font-size: 18px;color: #fff;background: #2979ff;transform: translate(-70%, -50%) scale(1);-webkit-transform: translate(-70%, -50%) scale(1);position: absolute;top: 7px !important;left: 9px !important;border: 0px solid #2979ff !important;}}
