How to change the glow outline color of a focused text field in JavaFX?

Question

After alot of browsing I haven't yet found a solution to this.

I'm trying to change this really light blue-ish border color around the TextFiedl (when it's selected).

---

The closest I've been to was with this:

.text-field {
    -fx-faint-focus-color: red;
}

But I get this result:

A really strong tone of red (the complete opposite of that soft border), that also looks thicker than the original one.

---

So, how can I change just the color, so that instead of a very light blue I'd be able to get, say, a very light red, whilst keeping the thickness/overall feel of the original glow?

Solution 1

Have you tried to reduce the alpha :

.text-field:focused{
    -fx-faint-focus-color: transparent;
    -fx-focus-color:rgba(255,0,0,0.2); /* here rgba (corrected) */
}

Solution 2

The default -fx-faint-focus-color has a opacity of 0x22 / 0xFF. You should do the same and also set the -fx-focus-color to red:

.text-field {
    -fx-focus-color: red;
    -fx-faint-focus-color: #ff000022;
}

---

default values from modena.css:

-fx-focus-color: #039ED3;
-fx-faint-focus-color: #039ED322;

Comments

[GOXR3PLUS]

People who make ... -1. At least let me know what was wrong . We are here to improve .

[Niek]

putting these in .root works like a charm for "any focused" control