How to target a <select> 'placeholder'
I’m trying to figure out a <select> with placeholder CSS issue. I want something to say, select on of the following as a default for the drropdown but it's not a vailid option and disapears when a values is selected. I can make it work when the select is required but when it’s not required, it’s not (so my code isn’t really working).
I have:
<div class="formgroup ">
<label for="community_club" class="formlabel">Community Club Association</label>
<p class="formgroup--instruction">If your are volunteering on behalf of a community club obligation, please select that community club from the list below</p>
<select class="formselect" id="community_club" name="community_club">
<option value="" selected disabled hidden data-placeholder=true>Select ... (only if representing a community club)</option>
<option value="100 Mile Hospice " >100 Mile Hospice </option>
<option value="Canadian Mental Health Association" >Canadian Mental Health Association</option>
<option value="Cariboo Calico Quilters" >Cariboo Calico Quilters</option>
<option value="Gambling Support BC" >Gambling Support BC</option>
<option value="Invasive Species Council of BC" >Invasive Species Council of BC</option>
<option value="LLH Community Club" >LLH Community Club</option>
<option value="n/a">n/a</option>
</select>
</div>
I've tried several things to target the disabled hidden option such as:
.form__select option[data-placeholder="true"] {
color: red !important;
}
but no luck. If I make the select required it works.
6 Replies
You don't have a
.form__select class
It's just .formselectthat's probably actually just the lack of backticks for sharing the code
@philhoskins check out #how-to-ask-good-questions for tips on how to use the backticks to format your code, or other useful ways to share your code
nice catch. but that was a copy-paste error. I do have formselect defined in the select class= (further update. I went to edit and it was formselect but displays formselect ????
Found this little tid bit
So you actually have to edit the select element directly to address the placeholder
thanks. that worked. select options all the placeholder color, then all but the first a normal select text color.