0

Tengo una aplicacion en javafx y estoy utilizando hojas de estilo, tengo un grupo de toggle y tengo como color de la porpiedad selected un color (verde) tengo un focus que aparenta ser solo un borde azul, pero cuando paso el focus se pierde el color verde del selected y no se nota diferencia alguna.

Mi pregunta es como hacer que cuando el focus llegue al control seleccionado no se pieda el color del selected, o cual seria la propiedad para tener focus + selected y darle una apariencia distinta:

    #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;
3
  • En CSS el orden de las reglas influye en cómo se aplican. Prueba a poner los estilos del selected después de los del focus. Además, aunque no ideal, quizás podrías hacer prevalecer los estilos del selected poniéndoles !important detrás.
    – Alvaro Montoro
    el 6 jul. 2018 a las 13:10
  • gracias Alvaro, mejoro la apariencia que queria tener con eso, soy nuevo en las hojas de estilo y desconozco muchas de las reglas, fue muy ilustrativo tu consejo. el 6 jul. 2018 a las 16:20
  • ¿Lo conseguiste solucionar con eso? Deberías poner una respuesta con los pasos que seguiste y cómo cambiaste el código para que te sirviera (y luego aceptarla cuando haya pasado el tiempo requerido). De ese modo servirá de ayuda a otros usuarios que puedan tener el mismo problema. Un saludo.
    – Alvaro Montoro
    el 6 jul. 2018 a las 16:34

2 respuestas 2

0

No conozco la aplicación javafx que estás usando pero si el código que esta te genera finalmente termina siendo html + css, me parece que el único problema es que tu código CSS está mal definido. La propiedad CSS del evento focus al hacer click es :focus y no ":focused"

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

Si además quieres que los estilos del focus prevalezcan sobre los del selected, simplemente usa la cascada de CSS para ello

0

La solucion fue sencilla, al menos en mi caso solo pase el codigo de selected hacia abajo del codigo para hacer focus, con eso el focus quedo debajo al llegar a un elemento seleccionado.

#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;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.