Form Field Question | JavaScript Help | XM Community
Skip to main content

Hi Everyone

Hope you’re well.

I have a form field question with custom JavaScript that gives me this.

This is the JavaScript.

Qualtrics.SurveyEngine.addOnload(function()
{
jQuery("#"+this.questionId+" inputptype=text]").eq(0).attr("placeholder", "INSERT TEXT;
jQuery("#"+this.questionId+" inputptype=text]").eq(1).attr("placeholder", "INSERT TEXT;
jQuery("#"+this.questionId+" inputptype=text]").eq(2).attr("placeholder", "INSERT TEXT;

});

Qualtrics.SurveyEngine.addOnReady(function()
{
	/*Place your JavaScript here to run when the page is fully displayed*/

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
	/*Place your JavaScript here to run when the page is unloaded*/

});

The JavaScript generates example text in the 3 boxes.

  1. How would I change the background colour of the boxes?
  2. How would I change the border colour of the boxes?
  3. How would I change the colour of the example text?
  4. How would I round the corners on the boxes?

As always thanks for your help.

👊

Hi, try adding the below CSS to the Style section of the Look & Feel:

.Skin .MC .TextEntryBox, .Skin .TE .ESTB .InputText, .Skin .TE .FORM .InputText, .Skin .TE .ML .InputText, .Skin .TE .PW .InputText, .Skin .TE .SL .InputText, .Skin .TE textarea, .Skin input.TextEntryBox, .Skin input[type=password], .Skin input[type=search], .Skin input[type=text], .Skin textarea {
    border: 2px solid #ff0000 !important;
    background-color: #ADD8E6 !important;
    color: #000000 !important;
    -webkit-border-radius: 30px !important;
    -moz-border-radius: 30px !important;
    -ms-border-radius: 30px !important;
    -o-border-radius: 30px !important;
    border-radius: 30px !important;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: red;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: red;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: red;
}

background-color handles the background color, border handles the border color, the placeholder bits handle the placeholder color, and the border-radius handles the rounded corners

Leave a Reply


Terms & Conditions