Text Entry Box | Custom Colour | XM Community
Skip to main content
Michael_Cooksey
Administrator
1 month ago
Solved

Text Entry Box | Custom Colour

P
Level 5 ●●●●●
Forum|alt.badge.img+5

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 :)

Best answer by Deepak

@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!

View original
ana_velez
PraDeepKotian_XM
Ricmarug
8 people like this
  • ana_velez
    ana_velez
  • PraDeepKotian_XM
    PraDeepKotian_XM
  • Ricmarug
    Ricmarug
  • Aanurag_QC
    Aanurag_QC
  • TusharDalwani
    TusharDalwani
  • S
    Shobhit
  • H
    Harshitanarula
  • K
    kapilgpt89

6 replies

Deepak
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+44
  • Deepak
  • 1553 replies
  • Answer
  • June 8, 2023

@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!

PraDeepKotian_XM
H
K
5 people like this
  • PraDeepKotian_XM
    PraDeepKotian_XM
  • H
    hkim
  • K
    Kristen_F
  • C
    Chintan_Chauhan_07
  • krbhavya
    krbhavya
P
Level 5 ●●●●●
Forum|alt.badge.img+5
  • parkie_0007
  • Author
  • Level 5 ●●●●●
  • 151 replies
  • June 8, 2023

Amazing! Thanks for this.

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

Deepak
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+44
  • Deepak
  • 1553 replies
  • June 9, 2023

@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.

PraDeepKotian_XM
C
krbhavya
3 people like this
  • PraDeepKotian_XM
    PraDeepKotian_XM
  • C
    Chintan_Chauhan_07
  • krbhavya
    krbhavya
K
Forum|alt.badge.img+1

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; 
}

Deepak
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+44
  • Deepak
  • 1553 replies
  • May 7, 2024

@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'
    });
});

 

K
1 person likes this
  • K
    Kristen_F
K
Forum|alt.badge.img+1

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

Deepak
1 person likes this
  • Deepak
    Deepak

Leave a Reply


Terms & Conditions