JavaFX组合框样式化

10

我需要在JavaFX中使用一个组合框(combobox),并且需要控制其弹出行为,例如,在单击组合框时,希望弹出框显示在组合框的上方而不是默认的下方。

这种操作可行吗?我们能否使用CSS实现?

感谢任何帮助。


我的问题有什么问题吗?不清楚吗?如果需要更多细节,请告诉我。 - Dil
1个回答

41

我希望这对你有用。根据你的需求进行一些更改。

.combo-box .list-cell 
{
    -fx-background: white;
    -fx-background-color: transparent;
    -fx-text-fill: -fx-text-base-color;
    -fx-padding: 3 0 2 7;
    -fx-cell-size: 1.66667em; 
}

.combo-box-popup .list-view 
{
    -fx-background-color: white, white;
    -fx-background-insets: 0, 1;
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 8, 0.0 , 0 , 0 );
}    

.combo-box-popup .list-view .list-cell 
{
    -fx-padding: 4 0 4 5;

    /* No alternate highlighting */
    -fx-background-color: white;
}

.combo-box-popup .list-view .list-cell:filled:selected, .combo-box-popup .list-view .list-cell:filled:selected:hover 
{
    -fx-background: -fx-accent;
    -fx-background-color: -fx-selection-bar;
    -fx-text-fill: -fx-selection-bar-text;
}

.combo-box-popup .list-view .list-cell:filled:hover 
{
    -fx-background-color: white;
    -fx-text-fill: -fx-text-inner-color;
}

.combo-box-base  
{
    -fx-skin: "com.sun.javafx.scene.control.skin.ComboBoxBaseSkin";
    -fx-background-color: white, white, white, white;
    -fx-background-radius: 5, 5, 4, 3;
    -fx-background-insets: 0 0 -1 0, 0, 1, 2;
    -fx-padding: 0;
}

.combo-box-base:hover
{
    -fx-color: -fx-hover-base;
}

.combo-box-base:showing 
{
    -fx-color: -fx-pressed-base;
}

.combo-box-base:focused {
    -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
    -fx-background-radius: 6.4, 4, 5, 3;
    -fx-background-insets: -1.4, 0, 1, 2;
}

.combo-box-base:disabled {
    -fx-opacity: .4;
}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接