JavaFX - combobox textfield couleur bg

Question

J'ai googlé et recherché dans SO, mais malheureusement, je ne trouve pas le chemin comment faire un non éditable combobox contiennent un textfield avec fond blanc via css.

En d'autres termes, comment créer une liste modifiable non modifiable comme une zone de liste déroulante modifiable (c'est-à-dire le même focus, bouton flèche, etc.)?

Le code:

.combo-box .text-field{ 
    -fx-background-color: white; 
} 

ne fonctionne pas.

Quelqu'un peut-il aider?

Answer 1

Vous pouvez simplement ajouter ce css:

.combo-box > .list-cell{ 
    -fx-background-color: -fx-outer-border, white; 
    -fx-background-insets: 1 -3 1 1, 1 -2 1 1 ; 
} 

Mais pour tous les styles de combobox edditable vous devez trouver .combo-box-base:editable de /jfxrt.jar!/com/sun/javafx/scene/control/skin/modena/modena.css et le remplacement champ .text avec .list cellules, parce que combobox modifiable a .TEXT champ

.combo-box > .arrow-button { 
    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color; 
    -fx-background-insets: 0 0 -1 0, 0, 1, 2; 
    -fx-background-radius: 3px, 3px, 2px, 1px; 
    -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */ 
    -fx-text-fill: -fx-text-base-color; 
    -fx-alignment: CENTER; 
    -fx-content-display: LEFT; 
} 

.combo-box > .arrow-button{ 
    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; 
    -fx-background-insets: 1 1 1 0, 1, 2; 
    -fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0; 
} 
.combo-box > .list-cell { 
    -fx-background-color: 
    linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border), 
    linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background); 
    -fx-background-insets: 1 0 1 1; 
    -fx-background-radius: 2 0 0 2; 
} 
.combo-box:contains-focus { 
    -fx-background-color: -fx-focus-color; 
    -fx-background-insets: -0.2; 
    -fx-background-radius: 3; 
} 
.combo-box:focused > .list-cell{ 
    -fx-background-color: 
    -fx-control-inner-background, 
    -fx-faint-focus-color, 
    linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background); 
    -fx-background-insets: 1 0 1 1, 1 0 1 1, 3 2 3 3; 
    -fx-background-radius: 2 0 0 2, 1 0 0 1, 0; 
} 

.combo-box :contains-focus > .arrow-button{ 
    -fx-background-color: -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color; 
    -fx-background-insets: 1, 2, 1, 2.6; 
    -fx-background-radius: 0 2 2 0, 0 1 1 0, 0 1 1 0, 0 1 1 0; 
} 

Et voici le résultat:

boîte 1 er style avec seulement 2 lignes

2-nd a testComboBox2.setEditable (true);

Style 3D avec grand css des styles par défaut.

Answer 2

Je ne sais pas si c'est ce que vous voulez parce que je ne peux pas m'imaginer bien "combobox non modifiable avec un champ de texte" mais peut-être une virgule entre eux?

.combo-box, .text-field{ 
-fx-background-color: white; 
} 

Ceci est mon sortie:

Est-ce que vous cherchez?

Answer 3

Je avais besoin de ce pour un projet. J'espère que vous n'avez pas été fracassant la tête contre elle aussi longtemps que je l'ai fait ...

.combo-box:disabled, .combo-box:disabled > .text-field { 
    -fx-opacity: 1.0; 
} 

Ensuite, si votre ComboBox est désactivé, il regardera normal, mais vous ne pouvez pas engager la chute vers le bas ou le type dans le champ de texte modifiable.