HTML font weight property on OPTION of HTML SELECT

Question

font-weight : bold not works on Option of HTML SELECT in Internet Explorer , is there any other way to specify bold type attribute on option of HTML SELECT.

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

 <select  ng-model="fields[filter.id]" style="width:200px;">
  <option value="">--- Select ---</option>
  <option class="test">zero</option>
  <option class="test1">one</option>
 </select>

These css styles are working in Firefox but having no effect in chrome and IE :(

Can you post your code? I'm pretty sure the selector is not good. — VladH, Sep 11 '13 at 07:11
You should test better before posting: it's not working on IE, like many things that work in normal internet browsers... — Danubian Sailor, Sep 11 '13 at 07:45
The proper code would be HTML code, not the code from which it is generated. For example, `ng-model` is not an HTML attribute. — Jukka K. Korpela, Sep 11 '13 at 08:40
possible duplicate of [Styling options in bold in Internet Explorer](http://stackoverflow.com/questions/6655625/styling-options-in-bold-in-internet-explorer) — Jukka K. Korpela, Sep 11 '13 at 08:42
@Jukka K. Korpela. I have shown actual code from which I have render select option. — Satish Sharma, Sep 11 '13 at 08:52

score 2 · Answer 1 · edited Jul 08 '20 at 12:43

2

Simply using

select{
    font-weight: bold;
}

<select>
  <option>aaa</option>
  <option>bbb</option>
</select>

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

edited Jul 08 '20 at 12:43

Flimm

136,138
45
251
267

answered Sep 11 '13 at 07:14

Praxis Ashelin

5,137
2
20
46

3

If you add some more options you'll notice that only the selected value is bold – VladH Sep 11 '13 at 07:19
1

It's not what OP wanted. – Danubian Sailor Sep 11 '13 at 07:35

score 0 · Answer 2 · answered Sep 11 '13 at 07:14

0

Since IE won't accept BOLD in select option, the only way to do this is to recreate the dropdown list with some script like this one : http://gregfranko.com/jquery.selectBoxIt.js/#HTMLOptionSupport

answered Sep 11 '13 at 07:14

EdenSource

3,387
16
29

It could work, but link-only ansers are discouraged (and sometimes hunted down and punished) on SO. You should post valid code HERE. – Danubian Sailor Sep 11 '13 at 07:36
I agree but, if no other solution (i believe) than what is shown on this page, am i supposed to past all the plugin code HERE ?! – EdenSource Sep 11 '13 at 07:48

score 0 · Answer 3 · answered Sep 11 '13 at 07:23

0

Try this:

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 not valid HTML 5 and bad practice):

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

answered Sep 11 '13 at 07:23

Jamil Hneini

545
3
13

Both are not working on IE, but actually it's OP who failed to write he has problem with internet explorer, and not internet browser... – Danubian Sailor Sep 11 '13 at 07:38
Yes I have updated code as per your suggestion but CSS changes are only reflecting in firefox not in chrome and IF :( – Satish Sharma Sep 11 '13 at 07:49
@Vladh The simplest solution is worked on IE , and IE mobile.you could try the hard way by rebuilding the Sepect Element using Javascript it is easy if you want any help just tell me – Jamil Hneini Sep 11 '13 at 09:06
I know that if you use the `` tag it will work, that's why I used the first example in that fiddle – VladH Sep 11 '13 at 10:41

HTML font weight property on OPTION of HTML SELECT

3 Answers3

Linked