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 .formselect
that'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
![](https://answer-overflow-discord-attachments.s3.amazonaws.com/1140007643822440578/IMG_2436.png)
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.