如何移除QComboBox列表项hover时的灰色边框?
移除QListView下拉项悬停时的灰色矩形边框问题
我正在为QComboBox和QListView设置样式,但不知如何移除鼠标悬停在下拉列表项时出现的烦人的灰色矩形边框。以下是我当前使用的QSS代码:
QListView样式
/*-----QListView-----*/ QListView { background-color: qlineargradient(spread:pad, x1:1, y1:0, x2:1, y2:1, stop:0 rgba(50, 61, 80, 255),stop:1 rgba(44, 49, 69, 255)); color: #fff; font-size: 12px; font-weight: bold; border: 1px solid #191919; border-radius: 10px; show-decoration-selected: 0; } QListView::item { color: #green; background-color: #454e5e; padding: 5px; border: 10px solid #191919; border-radius: 10px; padding-left : 10px; height: 42px; } QListView::item:selected { color: #31cecb; background-color: #454e5e; border: 2px solid magenta; border-radius: 10px; } QListView::item:!selected { color:white; background-color: transparent; border: none; padding-left : 10px; } QListView::item:!selected:hover { color: #bbbcba; background-color: #454e5e; border: transparent; padding-left : 10px; border-radius: 10px; }
QComboBox样式
/*-----QComboBox-----*/ QComboBox { color: #fff; font-size: 13px; font-weight: bold; border: 1px solid blue; border-radius: 5px; padding: 5px; } QComboBox::drop-down { width: 35px; border: 1px solid blue; border-radius: 5px; padding: 5px; }
当前样式效果如图所示:
要移除这个灰色矩形边框,你需要调整QSS里两个核心点:
- 替换
border: transparent;为border: none;:transparent只是让边框颜色透明,但边框本身的占位依然存在,使用none才能彻底移除边框元素。 - 全局添加
outline: none;:这个灰色边框大概率是Qt默认的焦点轮廓线,并非普通边框,需要显式禁用所有状态下的焦点轮廓。
修改后的QListView完整样式代码如下:
/*-----QListView-----*/ QListView { background-color: qlineargradient(spread:pad, x1:1, y1:0, x2:1, y2:1, stop:0 rgba(50, 61, 80, 255),stop:1 rgba(44, 49, 69, 255)); color: #fff; font-size: 12px; font-weight: bold; border: 1px solid #191919; border-radius: 10px; show-decoration-selected: 0; outline: none; /* 移除列表容器的焦点轮廓 */ } QListView::item { color: #green; background-color: #454e5e; padding: 5px; border: 10px solid #191919; border-radius: 10px; padding-left : 10px; height: 42px; outline: none; /* 统一禁用item的焦点轮廓 */ } QListView::item:selected { color: #31cecb; background-color: #454e5e; border: 2px solid magenta; border-radius: 10px; outline: none; } QListView::item:!selected { color:white; background-color: transparent; border: none; padding-left : 10px; outline: none; } QListView::item:!selected:hover { color: #bbbcba; background-color: #454e5e; border: none; /* 彻底移除hover状态的边框 */ padding-left : 10px; border-radius: 10px; outline: none; }
另外注意:你原代码中QListView::item默认设置了border:10px solid #191919;,如果不需要默认item有宽边框,也可以调整这个属性,避免和hover/选中状态的边框样式冲突。
内容的提问来源于stack exchange,提问作者Cplusplus Enjoyer
相关产品推荐
相关产品推荐

