效果图:

CSS代码:

/*编辑框 type=text*/
@set std-edit{
:root{width:208px;height:18px;line-height:18px;margin:0;padding:3;border:1px solid @mCtlborder;color:@mText3;background: @mCtlbackground;}
:root:focus{color: @mText4;}
}

/*单选框 type=radio*/
@set std-radio{
:root{width:16px;height:16px;line-height:16px;border:1px solid @mCtlborder;background: @mCtlbackground;
cursor:pointer;white-space:nowrap;vertical-align:baseline;border-radius: 999px;}
:root:active{foreground-image:url(../images/radio.png); foreground-repeat:no-repeat;foreground-position:50% 50%;}
:root:checked{foreground-image:url(../images/radio.png); foreground-repeat:no-repeat;foreground-position:50% 50%;}
:root:disabled{foreground-image:url(../images/radio.png); foreground-repeat:no-repeat;foreground-position:50% 50%;foreground-image-transformation:colorize(@mText4);}
}

@set std-checkbox{
:root{width:16px;height:16px;border:1px solid @mCtlborder;background: @mCtlbackground;
cursor:pointer;vertical-align:middle;}
:root:active{foreground-image:url(../images/checked.png); foreground-repeat:no-repeat;foreground-position:50% 50%;}
:root:checked{foreground-image:url(../images/checked.png); foreground-repeat:no-repeat;foreground-position:50% 50%;}
:root[mixed]{foreground-image:url(../images/check_mixed.png); foreground-repeat:no-repeat;foreground-position:50% 50%;}
}

/*按钮 type=button*/
@set std-button{
:root{padding:0 8 0 8;line-height:24px;border:1px solid @mCtlborder;background: @mCtlbtnbg;cursor: pointer;transition: none;color:@mText3;}
:root:hover{background:@mCtlHover;}
:root:active{background:@mCtlHover;}
:root:disabled{color:@mText4;}
}

/*数字选择按钮 type=number*/
@set std-number-edit{
:root{width:min-intrinsic;height: 24px;text-align: right;border:1px solid @mCtlborder;background: @mCtlbackground;color: @mText3;}
:root:focus{color: @mText4;}
:root > button{margin: 0 -2px -2px *;border:none;background:none;width:8px;foreground-repeat:no-repeat;foreground-image-transformation:colorize(@mText4);}
:root > button.minus{foreground-image:url(../images/select.png);foreground-position:50% 40%;}
:root > button.plus{foreground-image:url(../images/select_top.png);foreground-position:50% 60%;}
}

/*文件选择 type=file-path*/
@set std-file-selector{
:root{width:214px;height:24px;line-height:24px;padding:0px;margin:0px;border:1px solid @mCtlborder;background: @mCtlbackground;color:@mText3;}
:root > caption{padding:0px 0px 0px 24px;height:12px;foreground-repeat:no-repeat;foreground-position: 4px 50%;}
:root:empty > caption {padding:0px 0px 0px 6px;color:@mText4;}
:root > button{margin:0;padding:0;width:36px;height:18px;line-height:24px;color:@mText3;border:none;border-left: 1px solid @mline;}
:root > button > text {content: "删除";}
:root:empty > button > text {content: "选择";}
}
/*下拉列表框 type=select*/
@set std-select-dropdown{
:root{width: max-intrinsic;height:24px;line-height:24px;padding:0;background:@mCtlbackground;color:@mText4;border:1px solid @mCtlborder;}
:root > caption{padding:0 4 0 4;margin:0;color: @mText3;foreground-image:url(../images/select.png);
foreground-repeat:no-repeat;foreground-position-right:4px;foreground-position-top:50%;
foreground-image-transformation:colorize(@mText4);cursor: pointer;}
:root > button{width:0px;
border:none;background:none;display:none;}
:root > option{padding:2 4 2 4; color:@mText3;}
:root:focus > caption{color:@mText5;foreground-image-transformation:colorize(@mText5);}
/*:root > popup option:checked{background:@mText3;color:@mText5;}*/
:root > popup option:current{color:@mText5;}
:root > popup option{color: @mText3;cursor: pointer;}
}

/*文本框 textarea*/
@set std-textarea{
:root{background:@mCtlbackground;color:@mText4;border:1px solid @mCtlborder;overflow-x:none;vertical-scrollbar: mini_scrollbar;}
/*:root:focus{text-selection: @mText5 @mTextH;}*/
}

/*文本框日历*/
@set std-calendar{
:root{background:@mCtlbackground;}
tr{height:16px;line-height:16px;}
span.today-legend {display: none;}

}

/*日期*/
@set std-date{
:root{width:min-intrinsic;background:@mCtlbackground;color:@mText3;border:1px solid @mCtlborder;}
:root > caption{padding-left:3px;height:24px;line-height:24px;}
:root > button{border:none;background:none;width:8px;
foreground-image:url(../images/select.png);foreground-repeat:no-repeat;
foreground-position:50% 50%;foreground-image-transformation:colorize(@mText4);}
}


/*title 提示框*/
popup[role="tooltip"]{font-size:12px; overflow:none; padding:5px;margin:5px;background:@mCtlbackground}

图片素材:

原文链接:https://www.btbat.com/1121.html