Gravity forms Select Placeholder styling

Question

I have a gravity forms select field (dropdown) where i want to style the placeholder only. I hope someone can help me.

The form produces the following code:

<select name="input_10" id="input_4_10" class="medium gfield_select" tabindex="11">
 <option value="" selected="selected" class="gf_placeholder">Type of Business</option>
 <option value="Media">Media</option>
 <option value="Retail">Retail</option>
 <option value="Travel">Travel</option>
 <option value="Other">Other</option>
</select>

I want the gf_placeholder to have a different font-color and weight then the actual options. I've tried several things, but either it changes all the options or none. What am i missing? I think it has something to do with the dom. This is the scss that changes the correct item as soon as you open the dropdown:

.ginput_container_select select:first-child  {
    color:  $placeholder-color;
    @include font-size(16);
    font-weight: bold !important;
}

But as soon as you close the dropdown it goes back to the unstyled version.

Thanks in advance!

http://stackoverflow.com/questions/8635317/i-want-to-change-the-color-of-the-select-options-texts hope this will help you.. — Shuaib Khan, Dec 10 '15 at 07:53
Hi! I'm having the same problem. Could you solved it finally? Tks! — Fryla- Cristian Marucci, Sep 01 '16 at 21:39
Unfortunately not with only css... You could however try a javascript approach. — Bram, Sep 05 '16 at 04:56
I ve got the solution : It's simple: To change the color of the font in placeholders gravity form, you have to use CSS like this: How does it works? Gravity Form documentation target the ofrm ID by the part after the first field : #form_wrapper_8 -->> 8 is the number of your form. If your form is 2 write : #gform_wrapper_2 Now the CSS: #gform_wrapper_8 .gform_fields .gfield input::-webkit-input-placeholder {color: pink;} — Rubiwane, Feb 18 '20 at 13:09

score 1 · Answer 1 · answered Jun 07 '20 at 15:06

To apply Placeholder Styling on all your forms

/* Other Fields */
.gform_wrapper .gform_fields .gfield input::-webkit-input-placeholder {color: #ffffff;}

/* Paragraph Text Area */
.gform_wrapper .gform_body .gform_fields .gfield textarea::-webkit-input-placeholder {color: #ffffff;}

score 1 · Answer 2 · answered Dec 14 '21 at 13:59

Let's say that one wants to change the placeholder to the color #555555, and one has the following fields: Name, Email, Phone

For that, the following will do the work

.gfield input::-webkit-input-placeholder{
    color: #555555;
}

If one has a paragraph text, such as

Then one will need to use

.gfield textarea::-webkit-input-placeholder {
    color: #555555;
}

Gravity forms Select Placeholder styling

2 Answers2