1

This might be a duplicate. However it is not duplicate of How to style a <select> dropdown with CSS only. That thread deals with styling <select> element. What I am trying to style is the different states of the <option> inside the <select> element.

It might be a similar question to CSS :selected pseudo class similar to :checked, but for <select> elements. Which I have read and benefited from.

I have been reading about it for 2 days, and I came across several different/conflicting answers. Some say it cannot be done, others say some new browsers do support it. So here it goes.

I am unable to change the selected Item's text color of a multi-select dropdown. (blackish in this case)

I am however able to change the background of the selected and unselected items, and I am able to change the color of the unselected item's text. (red)

enter image description here

Also I am unable to change the highlighted items' text color (white in this case) as well.

enter image description here

select.multplClass option:checked { 
    margin:2px 0 !important;
    padding:3px 0 0 40px !important;
    background: url("../images/checkbox-02-Thin-24_checked.png") 5px center no-repeat , linear-gradient(#b9e763, #b9e763);
    color:blue !important;
}

select.multplClass option:not(:checked) { 
    margin:2px 0 !important;
    padding:3px 0 0 40px !important;
    background: url("../images/checkbox-02-Thin-24_unchecked.png") 5px center no-repeat;
    color:red !important;
}
<select multiple="" name="staff_type_idx" class="multplClass">
    <option class="multiple" value="1" selected="selected">Yönetici</option>
    <option class="multiple" value="2">Antrenör</option>
    <option class="multiple" value="3" selected="selected">Kondüsyoner</option>
</select>
Community
  • 1
  • 1
sukru.b
  • 55
  • 9
  • http://stackoverflow.com/questions/8619406/css-selected-pseudo-class-similar-to-checked-but-for-select-elements . I have read this tread. I got 'option:checked' and 'option:not(:checked)' from there to use in my css. It works with unchecked items but not with checked. – sukru.b Apr 03 '16 at 22:20
  • 1
    You've answered your own question already: support varies per browser (and OS). There's no cross browser solution using native ` – André Dion Apr 03 '16 at 22:29
  • I am not looking for a cross-browser solution. I am mostly interested in Chrome. Since the unselected element can be styled in Chrome, I assume the selected one should be able to as well. @AndréDion – sukru.b Apr 03 '16 at 23:12
  • 2
    As mentioned, there's no standard for styling OS-level UI controls like this. You get what you get, as limited as that is. You'll have to recreate UI with CSS, HTML and JS in order to achieve what you're after. It's clumsy and unfortunate, but that's the state of affairs. – André Dion Apr 03 '16 at 23:47
  • Possible duplicate of [How to style a – André Dion Apr 03 '16 at 23:48
  • @AndréDion I edited the question to explain why it is not the duplicate of said thread which deals with styling the – sukru.b Apr 04 '16 at 02:38
  • http://stackoverflow.com/questions/17419957/css-style-on-select-option – Pimmol Apr 04 '16 at 06:55

2 Answers2

1

Options inside html select cannot be styled.

They cannot contain any html inside of themselves, but text.

Options are not rendered by browser but operating system.

You can use a custom multi select such as this

osmanraifgunes
  • 1,438
  • 2
  • 17
  • 43
  • 1
    I saw other people saying 'Options inside html select cannot be styled.', however i am able to style the unselected option element's text color with 'select.multplClass option:not(:checked)'. But not the selected one. Am I missing something fundamental? – sukru.b Apr 03 '16 at 23:07
  • All rules I mentioned are about options of select. Your style is coloring selectbox. Your style wont work deeper elements inside selectbox. – osmanraifgunes Apr 04 '16 at 09:04
0

A solution, but not a clean one, for the background would be using linear-gradient.

So for example

option:checked {
    background-image: linear-gradient(0deg, red, red)
}

This makes the background of a selected option red. This is just a workaround not a good solution.

SAO Blash
  • 61
  • 1
  • 5