How to style textarea::placeholder?

I've created a form with some textbox fields and textarea fields. 

I'm implementing a large amount of custom styles. 

I'm using placeholder text inside each field, and hiding the labels, so they're visible to screenreaders but not to end users (who can see the placeholder text).

I want the placeholders to appear with a lighter shade of gray, but to make up for the light color, I want to use a bold font, however I'm noticing a technical problem with the way Jotform set placeholders, that prevents me from using ::placeholder { font-weight: bold } consistently for both field types.

Jotform uses Javascript to set the placeholder text on both textboxes and textareas, but it is done inconsistently.

setTimeout(function() { $('input_1').hint('This is a textbox placeholder'); }, 20); JotForm.setCustomHint('input_2', 'This is a textarea placeholder');

When this javascript runs, input's of class="form-textbox" get a normal placeholder="some text" attribute which I'm able to style properly using standard CSS code for ::placeholder { font-weight: bold }

However textareas of class="form-textarea" get a data-customhint="some text" which produces completely different shadow DOM that does not get styled properly.

Text Field shadow DOM in Chrome Inspector:

<input type="text" class="form-textbox" placeholder="This is a textbox placeholder">

 #shadow-root

   <div pseudo="-webkit-input-placeholder" id="placeholder" style="display: block !important;">This is a textbox placeholder</div>

  <div></div>

</input>

TextArea shadow DOM in Chrome Inspector:

<textarea class="form-textarea" data-customhint="This is a textarea placeholder">

 #shadow-root

  <div>This is a textarea placeholder</div>

</textarea>

Ideally, the setCustomHint would either:

a) do some kind of browser detection and use standard placeholder attribute, then fall back to something else when that doesnt work.

b) add a custom class to the element when the customhint is visible, so we can fake the style changes.

Thanks for your time and attention!

Thank you for contacting us. Could you try using this code to style hint text of textarea? 

.custom-hint-group {

  color: #9A9A9A;

  font-weight: 700;

}

It seems to work on my test form: https://form.jotform.com/90334766035962 

Let us know if this will work for you.

Thanks for weekend response.

You are probably right about the custom-hint-group class. But, there is one more class that is not shown when input is entered, please try this:

.form-custom-hint {

  color: #9A9A9A;

  font-weight: 700;

}

Let us know how it goes.

@Victoria_K,

That works!  Ugh. I don't know how I missed that class!

I looked at this several times :(  

Thank you for your assistance, you've been of great help today.

Regards,

James

@James, Glad to know that this helped. We will be glad to take a look if you face further difficulties, just let us know.