html - How can I change the appearance of a <select> element in the Chrome browser? -

i have following css:

.form input.disabled, .form select.disabled, .form textarea.disabled {   color: #a9a9a9;   border: 1px solid #adcede;   opacity: 0.5; } .form select.disabled option {   color: #000;   opacity: 1; } 

but seems not work html:

<form> <select data-ng-disabled="!option.selectedsubject"  data-ng-model="option.selectedcontenttype"  data-ng-options="item.id item.name item in option.contenttypes"  class="ng-pristine ng-valid"  disabled="disabled"> <option style="display: none" value="" class="">select content type</option></select> </form> 

there's lot wrong css right now.

1. just use form not .form refer element
2. you don't want select.disabled refers class, want select[disabled="disabled"] disabled isn't class it's attribute want use brackets attribute selector. you've disabled dropdown menu don't know point of last css statement for, seem trying make option transparent, can't because dropdown disabled.

since apparently want make form opaque despite being disabled, remove option last css selector , make above changes, , should work.

html:

<form>     <select data-ng-disabled="!option.selectedsubject" data-ng-model="option.selectedcontenttype" data-ng-options="item.id item.name item in option.contenttypes" class="ng-pristine ng-valid" disabled="disabled">         <option style="display: none" value="" class="">select content type</option>     </select> </form> 

css:

form input.disabled, form select.disabled, form textarea.disabled {     color: #a9a9a9;     border: 1px solid #adcede;     opacity: 0.5; } form select[disabled="disabled"]{     color: #000;     opacity: 1; } 

jsfiddle: http://jsfiddle.net/hcaf2/