Font Weight bold on select element

Question

I am having problems with font-weight on a select element. when applying font-weight: bold; the last letter gets cut off, because its bumping in to the right side. I searched and did not find any answer, even though it sounds like a problem that a lot of people have experienced, thanks.

select{
    font-weight: bold;
}

<select>
    <option>Option</option>
</select>

Here is a jsfiddle http://jsfiddle.net/pdg6805/3v58gsqm/

...In which browser? Looks OK to me in Firefox and Chrome. (Could it also be only true for some fonts?) — Lee Kowalkowski, Nov 03 '16 at 19:51

ameerosein · Answer 1 · 2016-11-03T19:56:32.247

1

sometimes in some cases applying bold to font-weight will change the width of that element and being wider causes cutting off, so you could reserve some more space for it by setting width in select.

edited Nov 03 '16 at 19:56

answered Nov 03 '16 at 19:49

ameerosein

523
3
16

This is the exact issue I have, nothing more nothing less – David Genger Nov 03 '16 at 19:51
@daveguru this may helps: http://stackoverflow.com/questions/556153/inline-elements-shifting-when-made-bold-on-hover – ameerosein Nov 03 '16 at 19:55

WitVault · Accepted Answer · 2016-11-03T19:55:35.123

1

One simplest way is to add width to select.

select{
    font-weight: bold;
    width:150px;
}

    <select>
     <option>Option &nbsp;</option>
   </select>

Or

select {
   font-weight:bold;
  }

    <select>
     <option>Option &nbsp;</option>
   </select>

edited Nov 03 '16 at 19:55

answered Nov 03 '16 at 19:51

WitVault

23,445
19
103
133

1

the second one is a better option as you don't have to set an explicit height!! Thank you. – David Genger Nov 03 '16 at 19:55

Font Weight bold on select element

2 Answers2