aardio-HTMLayout 各种控件CSS样式

效果图:

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