[Solved] Hide highlight boxes

0

Hi there!

How can I get rid of these useless and ugly boxes which appear after selecting each attribute?

Best regards,

Christian

Christian answered

    Best answer

    0

    Hi Christian,

    The outlines on answer options were added to ensure that SurveyGizmo surveys are accessible to keyboard-only users.

    We discourage removing this outline as it results in answer options that have no visible indication of focus for keyboard users.

    This article has some suggestions for modifying the default outline to make it less obtrusive.

    https://a11yproject.com/posts/never-remove-css-outlines/

    If you prefer to hide it altogether the following CSS Code will hide it for most question types:

    label {
    outline: none !important;
    }

    To use this code go the the Style tab of your survey and scroll to the bottom of the survey preview and click the link to access the CSS/HTML Editor. Then copy and paste the code on the Custom CSS tab.

    I hope this helps!

    Bri Hillmer
    Documentation Coordinator
    SurveyGizmo Customer Experience Team

    Community Admin selected as best answer
      0

      Hi Bri,

      Thanks for your quick response!

      After I had added the CSS Code on the the Custom CSS tab all Radio Buttons in Grid Questions do not have the custom color anymore. What went wrong?

       

      Radio Button and Checkbox Questions are still fine (green):

       

      Grid Questions have black Radio Buttons:

       

      My Custom CSS tab:

      .sg-header-image{
        padding-top: 25px;
        padding-right: 25px;
      }

      .sg-replace-icons input[type=radio]:checked + label:before,
      .sg-replace-icons input[type=checkbox].sg-input-checkbox:checked + label:before{
        color:#157c59;   
      }

      .sg-maxdiff-progress.sg-counter{
        padding-top: 40px;
      }

      label{
      outline: none !important;
      }

       

       

      Community Admin commented
        • Hi Christian: It looks like you are missing some updated selectors in your CSS if you replace your CSS for changing icons to the following this should work again for grids:

          .sg-replace-icons input[type=radio] + label:before,
          .sg-replace-icons input[type=radio] + label span.sg-icon-target:before,
          .sg-replace-icons input[type=checkbox] + label:before,
          .sg-replace-icons input[type=checkbox] + label span.sg-icon-target:before
          {
          color:#157c59;
          }

          Bri Hillmer
          Documentation Coordinator
          SurveyGizmo Customer Experience Team

        ×

        Login

        Question stats

        • Active
        • Views2848 times
        • Answers2 answers
        • Followers1 follower