How can I remove the focus highlight from text entry inputs? | Experience Community
Skip to main content
Solved

How can I remove the focus highlight from text entry inputs?

  • April 23, 2021
  • 2 replies
  • 1130 views
A

I want to remove this grey highlight (or border?) from text entry questions when they are focused on. Trying to give it my own highlight using css gives no results which is leading me to believe that this is some sort of inline style that is overwriting my own custom styles. I have tried as many things I can think of to remove it but to no avail. If you guys have any insight into this tricky/annoying highlighting of this question type, I would greatly appreciate it!
Screen Shot 2021-04-23 at 5.35.41 PM.png

Best answer by Ane0025

https://www.qualtrics.com/community/discussion/comment/36806#Comment_36806Thank you for your reply! I was missing several of those classes from my css.

It turned out that the grey outline showing around the box when focussed was actually a box-shadow! Applying "box-shadow: none !important" to the classes in your reply gave me the result I was looking for.

2 replies

BrianF
Forum|alt.badge.img+1
  • BrianF
  • April 25, 2021

Hi,
Depending on how specific you want to get or different question types, you can add the below to the CSS style in the Style area and the custom CSS box:
.Skin .TE textarea:focus, .Skin input.TextEntryBox:focus, .Skin input[type=password]:focus, .Skin input[type=search]:focus, .Skin input[type=text]:focus, .Skin select:focus, .Skin textarea:focus {
border-color: #007ac0;
outline: 0;
}

update the 'border-color' option to the color you want and add any other settings you might want.

    A
    • Ane0025
    • Author
    • Answer
    • April 26, 2021

    https://www.qualtrics.com/community/discussion/comment/36806#Comment_36806Thank you for your reply! I was missing several of those classes from my css.

    It turned out that the grey outline showing around the box when focussed was actually a box-shadow! Applying "box-shadow: none !important" to the classes in your reply gave me the result I was looking for.

      Terms & ConditionsAccessibility statement