Search code examples
javajavafx

How to style rounded corners of a TextArea in JavaFX

I tried styling a TextArea in JavaFx but I can't get rid of these white corners.

Preview of issue

#txa_movieEditComment .content{
    -fx-background-color: #949494;
    -fx-background-radius: 12;
}

#txa_movieEditComment {
    -fx-font-size: 17;
    -fx-focus-color: transparent;
    -fx-text-box-border: transparent;
}

#txa_movieEditComment .scroll-bar:vertical,
#txa_movieEditComment .scroll-bar:vertical .track,
#txa_movieEditComment .scroll-bar:vertical .track-background {
    -fx-background-color: #191919;
}

#txa_movieEditComment .scroll-bar:vertical .thumb {
    -fx-background-color: #949494;
    -fx-background-radius: 12;
}

This is my css styling. Maybe someone could help me.

Solution

  • CSS inheritance explanation for looked-up-colors and CSS attributes

    Supplemental to Jannis's answer, which was:

    #txa_movieEditComment {-fx-background: #191919;}

    I believe what you did works for you because -fx-background is an undocumented looked-up-color in the modena.css style sheet which is used for theming the styles.

    When you set it on a parent node, it will be inherited in child nodes, so any child node that also has colors derived from -fx-background (such as scroll pane content that is inside a text area) automatically changes color as well.

    From the documentation on looked-up-colors:

    With looked-up colors you can refer to any other color property that is set on the current node or any of its parents. This is a very powerful feature, as it allows a generic palette of colors to be specified on the scene then used thoughout the application. If you want to change one of those palette colors you can do so at any level in the scene tree and it will affect that node and all its decendents. Looked-up colors are not looked up until they are applied, so they are live and react to any style changes that might occur, such as replacing a palette color at runtime with the "style" property on a node.

    By contrast, this does not work:

    #txa_movieEditComment {-fx-background-color: #191919;}

    The reason is that -fx-background-color is a non-inherited CSS property, not a looked-up-color.

    CSS properties can inherit so that when you set them in a container node, nodes contained by it also inherit the property setting.

    But, by default, very few CSS properties are inherited (normally just font, text alignment, and cursor settings). When you set a non-inherited CSS property via a CSS style, it will only apply to the node exactly matching the CSS selector and not to any of the nodes contained by that node.

    Additional comments on the question

    The following comments apply if you want to consider how to style the text area without using looked-up-colors. (A full solution on how to do that is not provided here).

    A TextArea has a CSS substructure scrollpane -> content.

    You aren't styling the content.

    Default styling rules are in modena.css. Copy them and then modify them to suit.

    For example, there is this rule:

    .text-area .content { 
    -fx-background-radius: 2 
}

    You probably want a different radius value for that (also for the same rule with :focused psuedo-class).

    Setting the background radius for the scrollbar .thumb seems wrong (unless you want a round thumb or something like that). But you might want to set background radius values for other scroll pane CSS rules, (like is done in the modena.css stylesheet I linked).

    If you round the background too much, I don't know how you will get the thumb and track to remain in the rounded area because by default the thumb will move to the top and bottom of the non-rounded scrollpane area. Perhaps that is why you are trying to round the thumb itself.