1

EDIT:

I don't know why I got 2 downvotes, because still no one fixed the problem.

Problem:

I can't style the color of the selected option (that got functionality as the placeholder).

I tried this and some other silimar solutions, but couldn't find a HTML/CSS based solution.

option { color:#999; } /* NOT working */ option:selected { color:blue; }
<select class="form-control" id="frmMaand" name="offer_request[month]"> <option value="" class="disabled-option" hidden selected> <span style="color:#999 !important; background:#333 !important;">Select an option</span> </option> <option value="value1">Option 1</option> <option value="value2">Option 2</option> <option value="value3">Option 3</option> <option value="value4">Option 4</option> </select>

Note:

  • I am looking for a non-JavaScript/jQuery solution.

  • I want attributes attached to the option tag to keep the user experience optimal:

    hidden selected

Edit:

I want to use the first option like a placeholder. I don't want the placeholder visible in the dropdown and the color need to be lighter than the other option elements.

Improve this question
6
  • How can it be hidden and disabled and selected? Commented Dec 3, 2015 at 11:16
  • You cannot see a hidden element. How will you even style it? @JustDevelop. Commented Dec 3, 2015 at 11:19
  • Hope this helps stackoverflow.com/questions/17186866/… Commented Dec 3, 2015 at 11:21
  • @PraveenKumar It is visible when nothing is selected, so there have to be a way I can style it. Commented Dec 3, 2015 at 11:23
  • may be this helps stackoverflow.com/questions/1895476/… Commented Dec 3, 2015 at 11:24

4 Answers 4

Reset to default
3

Try this code, jsfiddle

 option { color:#999; } /* NOT working */ option:selected { color:blue; } .styled-offer select.offer-select { color:blue; } .styled-offer select.offer-select option { color: #999; }
 <div class="styled-offer"> <select class="form-control offer-select" id="frmMaand" name="type"> <option value="1" class="disabled-option selected" hidden selected > <span>Select an option</span> </option> <option value="value1" >Option 1</option> <option value="value2">Option 2</option> <option value="value3">Option 3</option> <option value="value4">Option 4</option> </select> </div>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

+1 because this is the closest solution to my problem. Only thing is now, that options which are selectable need to get their own color if the option is selected. Only the "placeholder" need a different color.
0

This option element of a select control cannot be styled, due to being rendered as HTML, except for the background-color and color properties.

Improve this answer

1 Comment

I can style the option element by color, but not the selected one. There have to be a nice and clean workaround for this.
0

You can change style of select and option like following :-

if you want to style each one of the option tags.. use the css attribute selector:

select option { margin:40px; background: rgba(0,0,0,0.3); color:#fff; text-shadow:0 1px 0 rgba(0,0,0,0.4); } select option[val="1"]{ background: rgba(100,100,100,0.3); } select option[val="2"]{ background: rgba(200,200,200,0.3); }

It may help you.

Improve this answer

1 Comment

Thank you for the reply, but it still isn't getting styled when I use the option[val=""] selector (for the option with the empty value)
0

You don't need the :selected selector: Just do tht : 

#frmMaand option { color:#999; }
Improve this answer

1 Comment

I want to use the option like a placeholder for the select element, but I don't want to display it in the list self. Applying your example, all options will be styled, and not the visible "placeholder" when nothing is selected.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.