JavaFX CSS styling TableView Cell on edit

Question

I'm trying to change the CSS style of an TableView Cell when I am changing the text but I can't find any selector for that. On the image you can see the white/blue border, that is what I want to change.

Answer 1

I had the same question this week. This is how I solved it:

.text-field-table-cell .text-field {
   -fx-padding: 1; 
   -fx-border-color:red; 
   -fx-background-color:yellow;
}
.table-cell:focused {
   -fx-padding: 0;
}

This also prevents a change in the row height.

Normal mode:

Edit mode:

If you are interested in the focus color, you should take a look at modena.css. There you'll find eg

/* A bright blue for the focus indicator of objects. Typically used as the
 * first color in -fx-background-color for the "focused" pseudo-class. Also
 * typically used with insets of -1.4 to provide a glowing effect.
 */
-fx-focus-color: #f25f29;
-fx-faint-focus-color: #f25f2933;

Answer 2

If you want to change the blue border or the background, you can try changing the properties of TextFieldTableCell . I can manage to change the blue border to red by doing this :

TextFieldTableCell > * {
    -fx-border-color: red;
}

You can also change the color of the inside of the focused cell (when writing in it) by changing the background color of TextFieldTableCell > *:focused .

I think the white border you mention is the regular color for the selection of a cell ( :select ). You can change it by changing the color of the selection when not focused : .table-row-cell:selected .

I ended up with this css to change the white border, the blue one and the backgrounds (both focused and unfocused) :

// blue border
TextFieldTableCell > * { // when editing
    -fx-background-color: purple;
    -fx-border-color: red;
}

// focused black background
TextFieldTableCell > *:focused { // when editing and clicking in the field
    -fx-background-color: yellow;
}

// white border
.table-row-cell:selected { // normal selection (not focused) color
    -fx-background-color: lightcoral;
}

Note : in my example, the purple color is only visible when I click outside the editing field, it's the unfocused background color.