CSS & HTML: Styling the selected option (as placeholder + don't show in the dropdown)

Question

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.

How can it be *hidden* **and** *disabled* **and** *selected*? — Paulie_D, Dec 03 '15 at 11:16
You cannot see a `hidden` element. How will you even style it? @JustDevelop. — Praveen Kumar Purushothaman, Dec 03 '15 at 11:19
Hope this helps http://stackoverflow.com/questions/17186866/how-to-style-html-select-option-tag/17188284#17188284 — Akshay, Dec 03 '15 at 11:21
@PraveenKumar It is visible when nothing is selected, so there have to be a way I can style it. — Justin La France, Dec 03 '15 at 11:23
may be this helps http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript — Ajay Makwana, Dec 03 '15 at 11:24
Thanks for the links to other questions, but most of them is related to styling the options and the select properties, not to make like a placeholder which isn't selectable but shown with the right styling. — Justin La France, Dec 03 '15 at 11:30

Codeone · Answer 1 · 2015-12-03T12:08:35.897

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>

+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. — Justin La France, Dec 03 '15 at 12:31

score 0 · Answer 2 · answered Dec 03 '15 at 11:17

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.

answered Dec 03 '15 at 11:17

Thanos Markou

2,587
3
25
32

I can style the option element by color, but not the selected one. There have to be a nice and clean workaround for this. – Justin La France Dec 03 '15 at 11:19

score 0 · Answer 3 · answered Dec 03 '15 at 11:18

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.

answered Dec 03 '15 at 11:18

Harsh Sanghani

1,666
1
14
32

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) – Justin La France Dec 03 '15 at 11:22

score 0 · Answer 4 · answered Dec 03 '15 at 11:21

0

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

#frmMaand option {
  color:#999;
}

answered Dec 03 '15 at 11:21

Akram Saouri

1,179
8
15

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. – Justin La France Dec 03 '15 at 11:25

CSS & HTML: Styling the selected option (as placeholder + don't show in the dropdown)

EDIT:

Problem:

Note:

Edit:

4 Answers4