Need help with CSS targeting only the placeholder in a dropdown field [RESOLVED]

[user65580f01a0a0b405 (Yumei Leventhal)]

I want the placeholder to be of the darkgrey color, including the placeholder for “country” in the address field. It seemed I succeeded, but then all the selected in all the dropdown fields become the same color. Need help to fix this code:

.ginput_right.address_country.ginput_address_country.gform-grid-col select,
.ginput_left.address_country.ginput_address_country.gform-grid-col select,
.ginput_container.ginput_container_select select{
    color: darkgrey !important;
}

went through a bunch of tips here and elsewhere and managed to get the

[faisalahammad]

Hi Yumei,

To make it work, simply remove the “!important” flag from the CSS code and try the following JavaScript code alongside your CSS code. You can apply a custom CSS class to the address field and then utilize querySelector('.YourClassName') instead of getElementById('input_1_40_6').

const selectElement = document.getElementById('input_1_40_6');

selectElement.addEventListener('change', function() {
  if (this.value === "") {
    this.style.color = 'darkgrey';
  } else {
    this.style.color = '#112337';
  }
});

Here is the preview:

Give it a try, and let me know how that goes!

[user65580f01a0a0b405 (Yumei Leventhal)]

Thanks for the code! I have a lot of forms on this site, so before I test it: Is there a way to make ALL placeholders lightgrey–and all selected fields the default (black) color?

[faisalahammad]

To apply these changes to all forms, you can add a custom CSS class such as “change_country_color” to the Address field. Then apply the modified JavaScript code below.

const selectElement = document.querySelector('.change_country_color select');

selectElement.addEventListener('change', function() {
  if (this.value === "") {
    this.style.color = 'darkgrey';
  } else {
    this.style.color = '#112337';
  }
});

---

If you have many forms and do not want to add custom CSS classes one by one, try the following code. It will apply the style to all available forms on your website.

const selectElement = document.querySelectorAll('.gfield--type-address select');

selectElement.addEventListener('change', function() {
  if (this.value === "") {
    this.style.color = 'darkgrey';
  } else {
    this.style.color = '#112337';
  }
});

Please keep me posted about the outcome. Thank you

[user65580f01a0a0b405 (Yumei Leventhal)]

Hi, your solution to my other question resolved this as well, but the other thread is closed for some reason. So I want to thank you here for your help. Your code here didn’t work–I needed to tweak some more because the color thing seemed to affect other fields, just not the country field. I still would like to see the placeholders be in the color darkgrey, but there is no urgency at the moment. Will circle back some other time. Thanks again!

[faisalahammad]

You’re welcome, Yumei.

When a code affects other fields, add a custom class to the specific field so the code won’t conflict. If you still need help, feel free to open a new ticket including your webpage URL and a screenshot so I can have a closer look and try to assist you. Thank you.