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!

Answer 1

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

Answer 2

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 Answers

Must Read

Your Answer

Chloe Bennett

Gravity Forms Select Placeholder Styling

2 Answers

Must Read

Your Answer

Sign up or log in

Post as a guest

Chloe Bennett