How to make the selected property not change with the focus in css

Question

How to make the selected property not change with the focus in css

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I have an application in javafx and I'm using style sheets, I have a toggle group and I have a color of the property selected (green) I have a focus that seems to be only a blue border, but when I pass the focus it loses the green color of the selected and no difference is noticed.

My question is how to make that when the focus reaches the selected control the color of the selected is not entered, or what would be the property to have focus + selected and give it a different appearance:

    #toggleG:selected{
            -fx-background-color:#adff2f;
            -fx-text-fill:black;
            -fx-font-weight:bold;
            -fx-underline-color:red;
    }
    #toggle:hover{
            -fx-background-color:#adff2f;
            -fx-text-fill:black;
            -fx-font-weight:bold;
    }
    #toggle:focused{
                -fx-focus-color:blue;
                -fx-faint-focus-color:#blue;
                -fx-inner-border:transparent;
                -fx-body-color:#ececec;
                -fx-background-color: -fx-faint-focus-color, -fx-focus- 
                     color, -fx-inner-border, -fx-body-color;
                -fx-background-insets: -1, -0.3, 1, 1;
                -fx-background-radius: 2px;

css javafx

asked by ERNESTO ALONSO MIXTECO MEZA 04.07.2018 в 21:40

source

2 answers

Winforms: Access a control from another thread Data Structure

score 0 · Answer 1

I do not know the javafx application that you are using but if the code that you generate finally ends up being html + css , it seems to me that the only problem is that your CSS code is badly defined. The CSS property of the focus event when you click is :focus and not ": focused "

 #toggle:focus{
    /* tus estilos aqui */
 }

If you also want the focus styles to prevail over the selected ones, simply use the CSS cascade for it

score 0 · Answer 2

The solution was simple, at least in my case just pass the selected code down the code to focus, with that the focus is below when you reach a selected element.

#toggle:hover{
        -fx-background-color:#adff2f;
        -fx-text-fill:black;
        -fx-font-weight:bold;
}
#toggle:focused{
            -fx-focus-color:blue;
            -fx-faint-focus-color:#blue;
            -fx-inner-border:transparent;
            -fx-body-color:#ececec;
            -fx-background-color: -fx-faint-focus-color, -fx-focus- 
                 color, -fx-inner-border, -fx-body-color;
            -fx-background-insets: -1, -0.3, 1, 1;
            -fx-background-radius: 2px;}

toggle: selected {

        -fx-background-color:#adff2f;
        -fx-text-fill:black;
        -fx-font-weight:bold;
        -fx-underline-color:red;
}