How to give an option tag font-weight: bold in Chrome?

Question

I want to show a select option's text in bold, like the below image. The code is working fine in all browsers except Chrome. How can I solve this problem?

<select style="font-weight:normal">
  <option style="font-weight:bold">Bold text here</option>
  <option style="font-weight:bold">Bold text here</option>
  <option style="font-weight:bold">Bold text here</option>
  <option style="font-weight:bold">Bold text here</option>
</select>

See http://stackoverflow.com/questions/11536763/select-dropdown-option-bold-in-chrome — Brian Stephens, Oct 07 '13 at 12:26
Possible duplicate of [How to style a select tag's option element?](http://stackoverflow.com/questions/5887133/how-to-style-a-select-tags-option-element) — TylerH, Nov 29 '15 at 23:34

score 2 · Answer 1 · answered Oct 07 '13 at 12:58

The basic idea is this

<div id="list1" class="dropdown-check-list">
        <span class="anchor">Select Fruits</span>
        <ul class="items">
            <li><b>Apple</b></li>
            <li>Orange</li>
            <li>Grapes </li>
            <li>Berry </li>
            <li>Mango </li>
            <li>Banana </li>
        </ul>
    </div>

css

.dropdown-check-list {
  display: inline-block;
}
.dropdown-check-list .anchor {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 50px 5px 10px;
  border: 1px solid #ccc;
}
.dropdown-check-list .anchor:after {
  position: absolute;
  content: "";
  border-left: 2px solid black;
  border-top: 2px solid black;
  padding: 5px;
  right: 10px;
  top: 20%;
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
  right: 8px;
  top: 21%;
}
.dropdown-check-list ul.items {
  padding: 2px;
  display: none;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
}
.dropdown-check-list ul.items li {
  list-style: none;
}
.dropdown-check-list.visible .anchor {
  color: #0094ff;
}
.dropdown-check-list.visible .items {
  display: block;
}

Script

<script type="text/javascript">

        var checkList = document.getElementById('list1');
        checkList.getElementsByClassName('anchor')[0].onclick = function (evt) {
            if (checkList.classList.contains('visible'))
                checkList.classList.remove('visible');
            else
                checkList.classList.add('visible');
        }

    </script>

This will get you starting. This uses minimal javascript. And you could do much more. Fiddle around and experiment.

score 1 · Answer 2 · answered Oct 07 '13 at 12:57

Could give us more informations about what you need this ??

For exemple : if you need to make bold the selected option, i used a hack like this, when you select an option, it become bold:

fiddle : http://jsfiddle.net/Gt7Yq/

html :

<select>
    <optgroup id='111' label="111" style="display:none"></optgroup>
    <option value="111">111</option> 
    <optgroup id='222' label="222" style="display:none"></optgroup>
    <option value="222">222</option> 
</select>

js :

$('select').on('change',function(){
    $('optgroup').hide();
    $('select option').show();
    $('select option:selected').hide();
    $('#'+$('select option:selected').val() ).show();
});

but if you want to show a special option, even if it's not selected... I can't help you... (but the answer interrest me)

How to give an option tag font-weight: bold in Chrome?

2 Answers2