HTML font weight property in OPTION HTML SELECT

Question

font-weight : bold does not work in the HTML SELECT option in Internet Explorer, is there any other way to specify a bold attribute type when selecting HTML SELECT.

  <select ng-model="fields[filter.id]" style="width:200px;"> <option value="">--- Select ---</option> <option ng-repeat="field in filter.fields" ng-disabled="!(field.selectable)" value="{{field.id}}" ng-class="{true:'test1', false:'test'}[field.selectable]" >{{field.label}}</option> </select> 

matching CSS style:

 <style> .test { color:black !important; font-weight:bold !important; } .test1 { margin-left:10px !important; } </style> 

These css styles work in Firefox, but do not affect chrome and IE :(

Answer 1

Just using

 select{ font-weight: bold; } 

must work. Fiddle: http://jsfiddle.net/NQxRA/1

Answer 2

Since IE does not accept BOLD as a selection option, the only way to do this is to recreate the drop-down list with some script as follows: http://gregfranko.com/jquery.selectBoxIt.js/#HTMLOptionSupport

Answer 3

Try the following:

HTML:

 <select> <option class="AllOptions" > Option 1 </option> <!--Add this class To All Options--> </select> 

CSS

 .AllOptions { font-weight:bold; } 

Or you can:

 select { font-weight:bold; } 

Or you can (but it is deprecated and invalid HTML 5 and bad practice):

 <select> <option> <b>Option1</b> </option> </select>