asullaherc asullaherc - 2 months ago 13
CSS Question

How to make TextArea focus style same with non-focus style

Here is my code:

.text-area {
-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;
}


The screenshot is following(I focus thefirst
TextArea
)

enter image description here

I have the following questions:


  • the focused
    TextArea
    top has gray bar: how to remove it?

  • the focused border color is white, how to make it like non-focus border color?

  • the non-focused
    TextArea
    has border shadow, how to remove it?


Answer

The following CSS classes make TextAreas look the same both in focused and not focused state: simple white background, default border without shadow, no "gray" bar on top, no focus highlighting.

.text-area {
    -fx-focus-color: transparent;
    -fx-faint-focus-color: transparent;
}

.text-area .content {
    -fx-background-color:-fx-control-inner-background;
}
.text-area:focused .content {
    -fx-background-color:-fx-control-inner-background;
}

.text-area:focused {
    -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border), -fx-control-inner-background;
    -fx-background-insets: 0, 1;
    -fx-background-radius: 3, 2;
}
Comments