Remove Border - Text Entry Boxes | XM Community
Skip to main content
Solved

Remove Border - Text Entry Boxes

  • July 12, 2023
  • 5 replies
  • 181 views
P
Level 5 ●●●●●
Forum|alt.badge.img+5

Hi All

I am currently using this CSS to customise text entry boxes.

.Skin .TE .ML .InputText, .Skin .TE .SL .InputText, .Skin .TE .ESTB .InputText  {
    background: #fff;
    color: #000000;
    border-radius: 5px;

What do I need to add to this to remove the light grey borders?

 

Thanks :)

Best answer by Eumetis

use this

.Skin .TE .SL .InputText, .Skin .TE .ML .InputText, .Skin .TE .ESTB .InputText, .Skin .TE .PW .InputText, .Skin .TE .FORM .InputText, .Skin .MC .TextEntryBox, .Skin input.TextEntryBox, .Skin .TE textarea, .Skin textarea, .Skin input[type=password], .Skin input[type=text], .Skin input[type=search] {
    border: 0px;}

 

you will find this code if you inspect the question. It will have to be added for essay box, multiple lines and single line..all types of text entry if they appear in your survey

5 replies

E
QPN Level 5 ●●●●●
Forum|alt.badge.img+11
  • Eumetis
  • QPN Level 5 ●●●●●
  • 78 replies
  • July 12, 2023

Hi try this

.Skin .TE .SL .InputText, .Skin .TE .ML .InputText, .Skin .TE .ESTB .InputText, .Skin .TE .PW .InputText, .Skin .TE .FORM .InputText, .Skin .MC .TextEntryBox, .Skin input.TextEntryBox, .Skin .TE textarea, .Skin textarea, .Skin input[type=password], .Skin input[type=text], .Skin input[type=search] {border : none; }

Naman_Savla
QPN Level 4 ●●●●
Forum|alt.badge.img+9
  • Naman_Savla
  • QPN Level 4 ●●●●
  • 37 replies
  • July 12, 2023

Hi @parkie_0007 ,

You can use the below code on the question level in JS.

jQuery(".TextEntryBox").css('border', '0px');

OR

By adding below css code in the look and feel 


.Skin .TE .SL .InputText, .Skin .TE .ML .InputText, .Skin .TE .ESTB .InputText, .Skin .TE .PW .InputText, .Skin .TE .FORM .InputText, .Skin .MC .TextEntryBox, .Skin input.TextEntryBox, .Skin .TE textarea, .Skin textarea, .Skin input[type=password], .Skin input[type=text], .Skin input[type=search] {border : none; }

Note:-The CSS code would no show any border which results in kind off a blank background like the below image. 

 

 

P
Level 5 ●●●●●
Forum|alt.badge.img+5
  • parkie_0007
  • Author
  • Level 5 ●●●●●
  • 157 replies
  • July 12, 2023

Hi try this

.Skin .TE .SL .InputText, .Skin .TE .ML .InputText, .Skin .TE .ESTB .InputText, .Skin .TE .PW .InputText, .Skin .TE .FORM .InputText, .Skin .MC .TextEntryBox, .Skin input.TextEntryBox, .Skin .TE textarea, .Skin textarea, .Skin input[type=password], .Skin input[type=text], .Skin input[type=search] {border : none; }

 

Thanks!

This worked for my 1st text box but not by next 2 questions.

Hope you can help.

 

Thanks :)

E
QPN Level 5 ●●●●●
Forum|alt.badge.img+11
  • Eumetis
  • QPN Level 5 ●●●●●
  • 78 replies
  • Answer
  • July 12, 2023

use this

.Skin .TE .SL .InputText, .Skin .TE .ML .InputText, .Skin .TE .ESTB .InputText, .Skin .TE .PW .InputText, .Skin .TE .FORM .InputText, .Skin .MC .TextEntryBox, .Skin input.TextEntryBox, .Skin .TE textarea, .Skin textarea, .Skin input[type=password], .Skin input[type=text], .Skin input[type=search] {
    border: 0px;}

 

you will find this code if you inspect the question. It will have to be added for essay box, multiple lines and single line..all types of text entry if they appear in your survey

P
Level 5 ●●●●●
Forum|alt.badge.img+5
  • parkie_0007
  • Author
  • Level 5 ●●●●●
  • 157 replies
  • July 12, 2023

Amazing, thanks for your help!


Terms & ConditionsAccessibility statement