Styling the text entry box | XM Community
Solved

Styling the text entry box

  • 27 June 2023
  • 3 replies
  • 235 views

Userlevel 6
Badge +12

Hi! I would like to change the appearance for the box in text entry questions. Mainly the Text Entry questions, but also the text entry option in Multiple Choice questions. Most off all, I need to round the corners and make the border of the box less thick in the Classic Layout.

Does anyone know how to taget these boxes in CSS?

 

icon

Best answer by Ricmarug 28 June 2023, 15:58

View original

3 replies

Userlevel 4
Badge +16

Hello @JohannesCE!

I managed to build this one time I had that exact need: 

I don’t really know much about CSS, but this has worked for me. 

.Skin input[type=text] {
    border: 2px solid #525252;
     border-radius: 6px;

}

There you can define the border thickness (the standard is 2px, so if you want a less tick border, you should use 1). 

Also the color of the border (in hex code) 

And the border radius (just change that 6 for the radius you want)

Hope this helps!

Userlevel 6
Badge +12

Thanks @Ricmarug, that helped! I made some changes, because I want to target both Text/Graphic Questions as the text-entry option in Multiple Choice Questions:

/* Style the text-entry box */
.Skin .InputText,
.Skin .TextEntryBox {
border: 1px solid #30B3AF !important;
border-radius: 10px !important;
}

 

Userlevel 4
Badge +16

That’s great! Happy to help :) 

Leave a Reply