【QSS样式表 - ⑪】：QDateTimeEdit控件样式

最新推荐文章于 2025-10-07 08:00:00 发布

原创最新推荐文章于 2025-10-07 08:00:00 发布 · 1.5k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#PyQt5 #PySide6 #QtDesigner #QSS

QSS样式表专栏收录该内容

17 篇文章

订阅专栏

文章目录

QDateTimeEdit控件样式
- QSS示例

QDateTimeEdit控件样式

QDateTimeEdit 子控件
QCalendarWidget 的子控件
属性选择器

QSS示例

新建一个 QMainWindow ，并在窗口中放置 QDateTimeEdit 和 QCalendarWidget 控件。对 QDateTimeEdit控件的设置如下：

如下图所示。

QDateTimeEdit{
	border: 1px solid black;
	font-size: 20px;
	selection-color: red;
	selection-background-color: yellow;
	padding-left: 10px;
}

/* 带日历的模式，右侧下拉按钮的容器 */
QDateTimeEdit[calendarPopup=true]::drop-down{
	border: none;
	width: 30px;
}

/* 带日历的模式，下拉箭头*/
QDateTimeEdit[calendarPopup=true]::down-arrow {
	image: url(:/images/images/calendar.png);
}

/* 按钮的菜单指示 */
QCalendarWidget QToolButton:menu-indicator{
	image: None;
}

/* 顶部导航条 */
QCalendarWidget QWidget#qt_calendar_navigationbar{
	font-size: 20px;
	background-color: blue;
	border: 2px solid yellow;
}

/* QCalendarWidget 上左箭头图片 */
QCalendarWidget QToolButton#qt_calendar_prevmonth{
	qproperty-icon: url(:/images/images/left-arrow.png);
}

/* QCalendarWidget 上右箭头图片 */
QCalendarWidget QToolButton#qt_calendar_nextmonth{
	qproperty-icon: url(:/images/images/right-arrow.png);
}

/* 日历视图的效果 */
QCalendarWidget QAbstractItemView {
	color: black;
	selection-color: blue;
	selection-background-color: red;
	font-size: 12px;
}