Search code examples
javaandroidgradlejavafxgluon-mobile

There is a way to change text Selection Handle cursor style on javafx mobile?

I'm not sure this css problem or something else. Javafx doesn't have css styling for text selection cursor because maybe javafx not designed to be a mobile application. When I'm searching about it. I found css styling for input caret. Like this but that's not the case for the problem i have. Any help would be appreciated.

Here there sample what i want. enter image description here

Here is my javafx project after porting into android enter image description here

Solution

  • Yes, there is a way.

    JavaFX's built in controls TextField and TextArea define the caret node, using caretHandle, selectionHandle1, selectionHandle2 stackpanes with CSS style classes caret-handle and selection-handle.

    This is still valid in the latest JavaFX version:

    caretHandle.getStyleClass().setAll("caret-handle");
selectionHandle1.getStyleClass().setAll("selection-handle");
selectionHandle2.getStyleClass().setAll("selection-handle");

    On a regular desktop platform, you would use modena.css, where the caret-handle, selection-handle style classes are not used.

    However in other platforms like Android, where embedded.css or touch.css are used, these do use the style classes:

    .caret-handle {
    -fx-background-color: transparent,
                          black /*#ACACAC*/,
                          linear-gradient(to bottom, #AFAFAF 0%, #DFDFDF 100%);
    -fx-shape: "M11.974,2.579L20,12.358V20H4V12.356L11.974,2.579z";
...

    The path in -fx-shape sets the shape you have posted in your picture:

    Being set by CSS, you can always override the shape with your own.

    You just need to add it to your CSS file, like:

    .caret-handle {
    -fx-background-color: blue;
    -fx-shape: "M 100,100 m -75,0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0z";
    -fx-background-insets: 0;
    -fx-padding: 0.5em;
}

    that will give you: