美文网首页
uni-app的checkbox圆角css

uni-app的checkbox圆角css

作者: gsn_hear | 来源:发表于2023-09-05 16:58 被阅读0次

    html

        <checkbox color="#FFFFFF" />
    

    微信小程序css

        >>>checkbox .wx-checkbox-input {
            border-radius: 50% !important;
            border: 2rpx solid #828181 !important;
        }
    
        >>>checkbox .wx-checkbox-input.wx-checkbox-input-checked {
            border: 2rpx solid #0c3ca8 !important;
            background-color: #0c3ca8 !important;
            color: #FFFFFF !important;
        }
    
        >>>checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
            color: #FFFFFF !important;
        }
    

    H5 css

        >>>uni-checkbox .uni-checkbox-input {
            margin-right: 0;
            border-radius: 50%;
            border: 2rpx solid #828181;
        }
    
        /* 取消选中后的样式 */
        >>>uni-checkbox .uni-checkbox-input:empty {
            border: 2rpx solid #828181;
            background-color: #5FFFFFF;
            opacity: 0.5;
        }
    
        /* 选中时的样式 */
        >>>uni-checkbox .uni-checkbox-input:not(:empty) {
            border: 2rpx solid #0c3ca8;
            background-color: #0c3ca8;
            color: #FFFFFF;
        }
    

    相关文章

      网友评论

          本文标题:uni-app的checkbox圆角css

          本文链接:https://www.haomeiwen.com/subject/fguhvdtx.html