UniGui单选框(TUniRadio),多选框(TUniCheckBox)样式重写
最近做了几个漂亮的页面 unigui的check,radio风格不搭,于是重写了样式
废话少说直接上代码
/*
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
标签:
暂无标签
版权申明
本文系作者 @baobao 原创发布在汗血宝宝的博客站点。未经许可,禁止转载。
暂无评论数据