JavaFX/CSS如何在ComboBox列表单元格右侧显示SVG对勾图标

你当前的实现是直接给选中状态的list-cell设置了-fx-shape属性，这个属性会将整个单元格的背景裁剪为你指定的SVG路径形状，所以才会出现对勾占满整个单元格的问题，和你要的右侧图标效果不符。

完全可以仅通过CSS实现需求，只需要把对勾作为背景图加载，再控制它的位置、大小即可，修改后的选中状态CSS如下：

.combo-box-popup .list-view .list-cell:filled:selected, .combo-box-popup .list-view .list-cell:filled:selected:hover{
    -fx-font-weight: bold;
    /* 右侧预留对勾的显示空间，数值可根据对勾大小自行调整 */
    -fx-padding: 0 28px 0 8px;
    /* 插入SVG对勾作为背景图，fill属性可调整对勾颜色 */
    -fx-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='white'><path d='m184.405 461.013-184.405-184.405 24.354-24.354 160.051 160.051 332.279-332.279 24.354 24.354z'/></svg>");
    -fx-background-repeat: no-repeat;
    /* 对勾位置：距离右侧8px，垂直居中，数值可自行调整 */
    -fx-background-position: right 8px center;
    /* 对勾尺寸，可自行调整 */
    -fx-background-size: 16px 16px;
}

其他原有CSS不需要改动，就能实现选中文字加粗、右侧显示固定大小对勾的效果。

如果后续需要对勾选状态做更灵活的调整（比如动态修改对勾颜色、加点击交互等），可以通过自定义ListCell实现：

• 自定义单元格继承ListCell，布局采用HBox，左侧放文本标签，右侧放SVGPath对勾控件，默认隐藏对勾
• 重写updateItem方法，当单元格处于选中状态时显示对勾，否则隐藏
• 给ComboBox设置setCellFactory使用你自定义的单元格即可

内容的提问来源于stack exchange，提问作者Skartt