How can I remove the focus highlight from text entry inputs? | XM Community
Solved

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

  • 24 April 2021
  • 2 replies
  • 450 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

icon

Best answer by Ane0025 26 April 2021, 19:53

View original

2 replies

BrianF
Badge +1

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

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.

Leave a Reply


Terms & Conditions