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.
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.
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
