最近做了几个漂亮的页面 unigui的check,radio风格不搭,于是重写了样式
2025-08-19T13:47:09.png
废话少说直接上代码


/*
auther:汗血宝宝
blog:http://blog.hanxuebaobao.compact
qq群:530592962
*/
.x-form-type-radio .x-form-radio,.x-form-type-checkbox .x-form-checkbox{display:none;}
.x-form-type-radio .x-form-cb-label-default.x-form-cb-label-after,.x-form-type-checkbox .x-form-cb-label-default.x-form-cb-label-after{padding-left:0;}
.x-form-type-radio span.x-form-field:has(input[type="radio"]:checked)+label,.x-form-type-radio span.x-form-field:has(input[type="radio"]:checked)~label,.x-form-type-checkbox span.x-form-field:has(input[type="checkbox"]:checked)+label,.x-form-type-checkbox span.x-form-field:has(input[type="checkbox"]:checked)~label{padding:0;display:inline-block;cursor:pointer;position:relative;margin-left:0;}
.x-form-type-radio span.x-form-field:has(input[type="radio"])+label:before,.x-form-type-radio span.x-form-field:has(input[type="radio"])~label:before{box-sizing:border-box;content:"";width:16px;height:16px;border-radius:50%;border:1px solid #999;margin:0;vertical-align:middle;display:inline-block;transition:.2s;background-size:0;margin-top:-2px;margin-right:5px;}
.x-form-type-checkbox span.x-form-field:has(input[type="checkbox"])+label:before,.x-form-type-checkbox span.x-form-field:has(input[type="checkbox"])~label:before{box-sizing:border-box;content:"";width:16px;height:16px;border-radius:4px;border:1px solid #999;margin:0;vertical-align:middle;display:inline-block;transition:.2s;background:url(ico_tick.svg) no-repeat center;background-size:0;margin-top:-2px;margin-right:5px;}
.x-form-type-radio span.x-form-field:has(input[type="radio"]:checked)+label:before,.x-form-type-radio span.x-form-field:has(input[type="radio"]:checked)~label:before{border:5px solid #00a4ff;}
.x-form-type-checkbox span.x-form-field:has(input[type="checkbox"]:checked)+label:before,.x-form-type-checkbox span.x-form-field:has(input[type="checkbox"]:checked)~label:before{background-color:#00a4ff;background-size:16px;border-color:#00a4ff;}
.x-form-type-checkbox span.x-form-field:has(input[type="checkbox"])+label:hover:before,.x-form-type-checkbox span.x-form-field:has(input[type="checkbox"])~label:hover:before{border-color:#00a4ff;}
.x-form-type-checkbox span.x-form-field:has(input[type="checkbox"]:disabled)+label:before,.x-form-type-checkbox span.x-form-field:has(input[type="checkbox"]:disabled)~label:before{background-color:#CCC;border-color:#999;opacity:.5;cursor:not-allowed;}

使用方法,直接粘贴到servermodule的customcss里即可
提示:只测试了unicheckbox和uniradio,其他用到单选/多选的控件并没有测试,例如uniradiogroup unidbgrid等

分类: UniGui使用CSS 标签: 暂无标签

评论

暂无评论数据

暂无评论数据

目录