Placeholder color for Select Fields

.

Make your Webflow Select Field to have one color for the placeholder and a second color after a option is selected just like a regular text input field.

At project settings of your Webflow project, go to the Custom Code tab and paste the code bellow under Before </body> tag:

<script>
$(document).ready(function () {
   // Get all elements that has the "attr-select-field" attribute
   $("[attr-select-field]").each(function (index) {
       // Get the current color
       let selectedColor = $(this).css("color");
       // Get the placeholder color
       let placeholderselectedColor = $(this).attr("attr-select-field");
       // Update the current color to match the placeholder color
       $(this).css("color", placeholderselectedColor);
       // Verify whenever the select value changes
       $(this).change(function () {
           // If the value is empty set the color to be he pleceholder color
           if ($(this).val().length <= 0) {
               $(this).css("color", placeholderselectedColor);
           }
           // If the value isn't empty the color should be the selected color
           else {
               $(this).css("color", selectedColor);
           }
       });
   });
});
</script>

Select the field where you want to create the placeholder effect and under Typography set the color you want the text to have when an option is selected.

Now under the element settings create a new attribute named attr-select-field with the hex color you want for the placeholder as its value (e.g., #000000).

Note: The first choice in the Select Field must have an empty value.

Remember to publish your site to see the effect in action.

Tags
Custom Code
Utility
Webflow
Link to Webflow Professional Partner page.