主要参考:
Qt Style Sheets Examples
官方例程上的原文如下:
QCheckBox {
spacing: 5px;/*复选框文本与勾选框(就是左边的勾选小框框,自己瞎叫的)的距离*/
/*还可以设置一些常用的属性,这里都是设置复选框而不是勾选框的。
font:...
background-color:...
padding:...
*/
}
QCheckBox::indicator {
width: 13px;/*勾选框的大小*/
height: 13px;
}
/*勾选框未选中时的图像*/
QCheckBox::indicator:unchecked {
image: url(:/images/checkbox_unchecked.png);
}
/*勾选框未选中时有光标停留的图像*/
QCheckBox::indicator:unchecked:hover {
image: url(:/images/checkbox_unchecked_hover.png);
}
/*勾选框未选中被点击的图像*/
QCheckBox::indicator:unchecked:pressed {
image: url(:/images/checkbox_unchecked_pressed.png);
}
/*勾选框选中时的图像*/
QCheckBox::indicator:checked {
image: url(:/images/checkbox_checked.png);
}
/*勾选框选中时有光标停留的图像*/
QCheckBox::indicator:checked:hover {
image: url(:/images/checkbox_checked_hover.png);
}
/*勾选框未选中时被点击的图像*/
QCheckBox::indicator:checked:pressed {
image: url(:/images/checkbox_checked_pressed.png);
}
/*勾选框在未定状态时有光标停留的图像*/
QCheckBox::indicator:indeterminate:hover {
image: url(:/images/checkbox_indeterminate_hover.png);
}
/*勾选框在未定状态时被点击的图像*/
QCheckBox::indicator:indeterminate:pressed {
image: url(:/images/checkbox_indeterminate_pressed.png);
}
一般图像资源有三个添加选项可选:
- background-image: 保持image原始尺寸
- border-image:这个可以让image随边界自适应放大缩小
- image:保持image原始尺寸,默认是repeat填充空白,要设置norepeat,
image-repeat:repeat-x 图像横向平铺
image-repeat:repeat-y 图像纵向平铺
image-repeat:repeat 图像横向和纵向都平铺
image-repeat:no-repeat 图像不平铺
在添个自己常用到的
QCheckBox::indicator:focus{
border:-10px;/*当用方向按键选中时的情况,上面hover只能是鼠标悬停,这个可以补充下按键的情况*/
}
QCheckBox::indicator{
position: absolute; //勾选框在QCheckBox的位置方式是绝对还是相对的,如果是relative,那勾选框好像无法随外框大小改变,只有在absolute时,长,宽不指定值就会随之改变
top: 0px; //勾选框的位置
left: 0px; //勾选框的位置
color: #758794;
width: 100%;//指定了宽,所在宽不变,高会随外框变化而变
padding: 1px 0 0 0;
margin-xx:勾选框外边距(与外框的距离)
padding-xx:内边距(可以改勾选框大小)
}
QCheckBox{
spacing:10px;// 文字与勾选框的距离
margin-xx:外边距(外框与实际控件外界的距离)
padding-xx:内边距(与勾选框的距离)
}
支持的属性看Supported HTML Subset
更具体的直接看CSS 参考手册
http://blog.csdn.net/du_bingbing/article/details/52755789#t8