When will Webflow update the "Select Field" component to allow for a placeholder with different colors before and after selection, without the need for a label above the field?
TL;DR
- Webflow doesn’t support native placeholder styling for Select Fields, requiring custom code to mimic placeholder behavior.
- You can simulate this by disabling and styling the first option or using custom CSS/JS, and suggest the feature via Webflow’s Wishlist.
Webflow currently does not support native placeholder styling (e.g., different colors before and after selection) for the Select Field component without using a label or custom code.
1. Current Limitations with Select Fields
- Placeholders in Select Fields (like “Choose an option”) are actually styled as regular option elements, not true input placeholders.
- Webflow’s built-in Select Field doesn’t allow conditional color changes based on whether a selection has been made.
- There is also no official Webflow update timeline or feature release that enables this functionality natively.
2. Workarounds Available Today
To simulate placeholder behavior with different colors, you can consider:
- Style the first option with something like “Select an option” and disable it to mimic a placeholder.
- Add a custom class to target the Select Field and use custom JavaScript or CSS (e.g., using the
:invalidand:requiredstate withoption[disabled][selected]) to style the placeholder differently. - Remove the label and use absolute-positioned text or icons inside the Select Field wrapper to simulate placeholder-like UX.
3. Webflow’s Feature Request Process
- You can submit or upvote this request on the Webflow Wishlist platform: wishlist.webflow.com.
- Webflow monitors popular feature requests, and more votes can influence prioritization.
Summary
Webflow does not currently support multi-color placeholders in Select Fields without labels. Achieving this requires custom code. There is no confirmed update timeline addressing this feature, but you can request it via Webflow’s Wishlist.
