Issue
I can't set background-color of a selected option in a drop-down list. My working is:
<select name="Occupancy Status" class="form-control form-control-sm">
<option style="background-color:#333333" selected>Select your Occupany Status</option>
<option>bla bla</option>
<option>bla bla</option>
<option>bla bla</option>
</select>
Is there a way to achieve desired output? Thank you.
Solution
Is this what you are looking for? It isn't polished at all just wanted to see if this is the basic behavior that you're describing that you can't figure out.
.form {
height: 50vh;
width: 50vw;
background: #333;
color: #fff;
margin: 0 auto;
padding: 2rem;
}
.field-select {
border-radius: 5px;
background-color: transparent;
border-color: rgba(255, 255, 255, 0.25);
color: #fff;
}
.field-select > option {
color: initial !important;
}
<div class="form">
<div class="field">
<label>What is your house type? <span>(Required)</span></label>
<div>
<select class="field-select" aria-required="true" aria-invalid="false">
<option value="" selected="selected" class="field-placeholder">Select</option>
<option value="Detached House">Detached House</option>
<option value="Semi-Detached House">Semi-Detached House</option>
<option value="Mid-Terrace House">Mid-Terrace House</option>
<option value="End-Terrace House">End-Terrace House</option>
<option value="Detached Bungalow">Detached Bungalow</option>
<option value="Semi-Detached Bungalow">Semi-Detached Bungalow</option>
<option value="Flat">Flat</option>
<option value="Other">Other</option>
</select>
</div>
</div>
</div>
Hit "Run code snippet" above, or check out on my CodePen.
Answered By - Stephen M Irving
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.