How to remove shadow from text area border


Question

I want to create text area with black borders.

TextArea dataPane = new TextArea();
dataPane.setStyle("-fx-border-color: black; -fx-border-width: 1; -fx-border-radius: 16;");

But I get this result:

enter image description here

Can you tell me how I can remove this blue shadow?

1
1
6/14/2013 8:28:08 PM

Accepted Answer

The blue border is not a shadow but a default focus color in caspian style of JavaFX for controls. You can see its definition in caspian.css as -fx-focus-color with default value #0093ff.

Now we can override this color palette per control. So you do

dataPane.setStyle("-fx-border-color: black; -fx-border-width: 1; "
                + "-fx-border-radius: 16; -fx-focus-color: transparent");
5
6/14/2013 10:11:38 PM

If you want to completely remove all the borders, shadows, highlights:

.text-area {
    -fx-background-insets: 0;
    -fx-background-color: transparent, white, transparent, white;
}

.text-area .content {
    -fx-background-color: transparent, white, transparent, white;
}

.text-area:focused .content {
    -fx-background-color: transparent, white, transparent, white;
}

.text-area:focused {
    -fx-highlight-fill: #7ecfff;
}

.text-area .content {
    -fx-padding: 10px;
    -fx-text-fill: gray;
    -fx-highlight-fill: #7ecfff;
}

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Icon