CODEWITHSUNDEEP
csstwitter-bootstrap-3
gates
gates

Reputation: 4603

How to apply color select fixed option

I am using a dropdown using select. In order to make the the option fixed position, I am using display:none for the first option. But I want add color to that fixed option, For other options colors are getting applied but not for the fixed option

Here is the code

.fixed-pos{
  display: none;
  color: red; /*this does not apply */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="form-group search-options">
  <select class="form-control">
    <option class="fixed-pos">Search by ..</option>
    <option>One</option>
    <option>two</option>
  </select>                 
</div>

Upvotes: 1

Views: 63

Answers (1)

Jannik Rasmussen
Jannik Rasmussen

Reputation: 397

It's because it's not the first option you see. It's the actual select box. This is how you could do it:

select.form-control {
  color: #f00;
}
.fixed-pos {
  display: none;
}
select option {
  color: #000;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="form-group search-options">
  <select class="form-control">
    <option class="fixed-pos">Search by ..</option>
    <option>One</option>
    <option>two</option>
  </select>
</div>

I hope this helps you :-)

PS. You will need to add a class when an option is selected (JavaScript), if you don't want the select box to be red anymore, after selection.

Upvotes: 1

Related Questions