CODEWITHSUNDEEP
htmlcss
Crashalot
Crashalot

Reputation: 34503

Set different font-weights for different option values of select menu?

These questions are similar but not the same or are very outdated:

The goal is to style different options of the same select menu with different font-weights. We only need to support modern browsers.

This code doesn't work, even though answers on Stack Overflow and elsewhere suggest it should in modern browsers like Chrome.

Here's an example of what it looks like when using the answer from @gravgrif, which shows all the options styled the same:

enter image description here

Another alternative that did not help was bundling each option in an optgroup, and styling the optgroup.

<select class="weightMenu" title="Bold options available">
  <option value="200" style="font-weight:200">B</option>
  <option value="300" style="font-weight:300">B</option>
</select>

The goal is to use native HTML and CSS. No plug-ins.

Upvotes: 0

Views: 612

Answers (2)

Vintage Coders
Vintage Coders

Reputation: 162

Using bigger font weight may solve this issue. This is because lower values for font-weight looks the same.

<select class="weightMenu" title="Bold options available">
  <option value="400" style="font-weight:400">A</option>
  <option value="700" style="font-weight:700">B</option>
  <option value="800" style="font-weight:800">B</option>
</select>

Upvotes: 0

gavgrif
gavgrif

Reputation: 15489

Although your code works fine - you should move the styles to the CSS rather than inline styling. Note - i made the font weights greater to show the differences better.

.weightMenu option:nth-child(1) {
  font-weight:400;
}

.weightMenu option:nth-child(2) {
  font-weight:700;
}

.weightMenu option:nth-child(3) {
  font-weight:900;
}
<select class="weightMenu" title="Bold options available">
  <option value="200">A</option>
  <option value="300">B</option>
  <option value="400">C</option>
</select>

enter image description here

Upvotes: 1

Related Questions