Text Entry Box | Custom Colour | XM Community
Skip to main content

Hi Everyone

Hope you’re all well. 👊

I did find a few existing posts on this but unfortunately they didn't seem to work so hope you can help.

Referencing this image.

 

  1. How would I make the text entry boxes white?
  2. How would I round the edges of the text entry boxes?
  3. How would I change the colour / size of the text in the final text entry box? I am currently using this code. 
    Qualtrics.SurveyEngine.addOnload(function()
    {
    jQuery("#"+this.questionId+" .InputText").attr("placeholder", "Please provide your email if possible");

Thanks everyone :)

@parkie_0007

This should do the job; Include in look and feel > Style > Custom CSS

.Skin .TE .ML .InputText, .Skin .TE .SL .InputText, .Skin .TE .ESTB .InputText  {
    background: #fff;
    color: #000;
    border-radius: 25px;
}

::placeholder {
 font-size: 32px;
color: #000; 
}

Hope it helps!

Amazing! Thanks for this.

How would I then change the size of the text that went into the text entry boxes?

@parkie_0007 In the same above css 

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

font-size: 32px;
}

Add font-size as well.

How can I apply this code to one question? I tried the code below but when I add the #QID21 part, the CSS no longer applies:

 

#QID21.Skin .TE .ML .InputText, .Skin .TE .SL .InputText, .Skin .TE .ESTB .InputText  {
    background: #fff;
    color: #000;
    border-radius: 25px;
}

::placeholder {
 font-size: 32px;
color: #000; 
}

@Kristen_F 

Include below code in JavaScript of that question

Qualtrics.SurveyEngine.addOnload(function() {
    /* Place your JavaScript here to run when the page loads */

    jQuery('#'+this.questionId+' .InputText' ).css({
        background: '#fff',
        color: '#000',
        'border-radius': '25px'
    });
});

 

@Deepak Thanks so much, that works! Really appreciate your help.

Leave a Reply


Terms & Conditions