Placeholder Text Color for Dropdowns

[koaxaca]

Hi, I'm trying to figure out if there's a way to change the color of the placeholder text on my dropdown field in my form. I have formatted the rest of the form with CSS and all the text/email/number fields I have changed the placeholder text to be a light gray. The dropdown however stays black and I'm not sure if there's anything I can put in my CSS to change that.

[vic113]

Hi 

I used this CSS code:

select:invalid,
select option[value=""] {
 color: #999999;
}

Also you can use your variables so the color will be the same as the rest of your placeholders:

{% set form_placeholder_color = '#999999' %}

select option[value=""] {
  color: {{ form_placeholder_color }};
}
.hs-input:-moz-placeholder {
  color: {{ form_placeholder_color }};
}
.hs-input::-webkit-input-placeholder {
  color: {{ form_placeholder_color }};
}

[andrej_gajdos]

Styling <select> html element is always tricky. Please, take a look at my tutorial on how to create a custom select dropdown component.

[Jsum]

Hi @koaxaca ,

For fields are tricky to style, and in a lot of cases you will not be able to acheive what you are wanting without the use of javascript.

further still, even after styling, you have the browser defaults to content with. Here are some links to help:

w3schools - https://www.w3schools.com/howto/howto_custom_select.asp

MDN web docs - https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms

a codepen: https://codepen.io/ericrasch/pen/zjDBx

an experiment with select field styling and browser support: https://www.filamentgroup.com/lab/select-css.html

and lastly, incase this isn't the method you used for the placeholder text, you can try this: https://css-tricks.com/almanac/selectors/p/placeholder/

Let me know if this helps.

Need help? Hire Us Here