Question T20024
Visible to All Users

Boolean Focus

created 3 months ago (modified 3 months ago)

Is there any way to frame the switch on focus?
for example it doesen't work:

CSS
sd-boolean__control:focus + .sd-boolean__switch { outline: red solid 2px; }
Comments (2)

    Hello,
    When a Boolean question receives focus, it appears as follows:
    Clipboard-File-1.png

    Would you please elaborate on the required output?

      I use my own styles in the survey.
      I managed to change styles for radio button and checkbox on focus, but for boolean it doesen't work.
      There is how it works for checkbox:

      CSS
      .sd-checkbox__control:focus-visible + .sd-checkbox__decorator { outline: red solid 2px; }

      Answers approved by surveyjs Support

      created 3 months ago

      Hello,
      You can apply the following CSS to change the color of a focused Boolean element:

      CSS
      .sd-boolean.sd-boolean--allowhover:focus-within { box-shadow: var(--sjs-shadow-inner-reset, inset 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), 0 0 0 2px red; }

      Clipboard-File-1.png

      Alternatively, modify the --sjs-primary-backcolor CSS variable. However, take note that this change would also affect other placed of a questionnaire because this color is also used in other places.

      CSS
      #surveyElement{ --sjs-primary-backcolor: red; }

      Should you have any further questions, please let me know.