Impossible to target :checked for radio field

  • Resolved Bessonweb

    (@besky)


    2 years, 10 months ago

    Hello,

    I try to stylish the radio field like a button (this would be a good thing to do for your devs ?? )

    I want the radio “button” have a differente style when it is checked.

    But it’s seem impossible. Can you tell me why and how to solved this please?

    I have tryed this :

    .forminator-radio input:checked .forminator-radio-label {
  [ MY STYLES ]
}

    I have tryed by JS with no success…

    Please help me ??

    Thanks!

    • This topic was modified 2 years, 10 months ago by Bessonweb.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Kris – WPMU DEV Support

    (@wpmudevsupport13)

    Hi @besky

    I hope you are doing good today.

    To no affect other forms on site, target form via for ID, where 4349 is ID of your form

    #forminator-module-4349 .forminator-radio input[type="radio"]:focus + span[aria-hidden] {
    border: 5px solid #000 !important;
}

    The border is an example, the most important thing is to use “!important” so that style could be overwritten.

    Kind Regards,
    Kris

    Thread Starter Bessonweb

    (@besky)

    Hi @wpmudevsupport13

    As much as we can with covid… thank you ??

    You guided me to the solution!

    In my case, I target the “.forminator-radio-label”, so :

    #forminator-module-29000 .forminator-radio input[type="radio"]:focus + .forminator-radio-bullet + .forminator-radio-label {
  color: #fff;
  background-color: var(--color-1);
}

    I would be a good thing to simplify our work with a small class when checked ^^

    Thank you very much!

    You provide a good support, I’m happy to use your plugin!

    Have an amazing day!

    Regards,
    Richard.

    Thread Starter Bessonweb

    (@besky)

    Oh, but when the field loose the focus…

    I have changed “:focus” by “:checked”.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Impossible to target :checked for radio field’ is closed to new replies.