0

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.

Crashalot
  • 33,605
  • 61
  • 269
  • 439
  • 2
    Your code does in fact style the ` – Obsidian Age Jun 24 '19 at 02:21
  • I've tried your code snippet and it works fine. Just as @ObsidianAge said, the difference is too subtle – joohong89 Jun 24 '19 at 02:22
  • You need to make sure the font you are using has variants for weights 200 and 300. Otherwise they will appear the same. – Irfanullah Jan Jun 24 '19 at 03:07
  • @ObsidianAge Thanks for the help! Yes, is there something special needed to style the selected option? – Crashalot Jun 24 '19 at 03:23
  • @ObsidianAge The answer from gavgrif below was tried and this was the output: https://imgur.com/a/Jc9Votz. The styles all look the same? – Crashalot Jun 24 '19 at 03:42

2 Answers2

1

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

gavgrif
  • 15,194
  • 2
  • 25
  • 27
  • Thanks! Is there a reason to move the styles to CSS? We need to change the font-weights dynamically based on different font families chosen. – Crashalot Jun 24 '19 at 03:22
  • Running your code snippet shows these styles: https://imgur.com/a/Jc9Votz. They all seem the same? What do you see? Thanks again for your help! – Crashalot Jun 24 '19 at 03:37
  • Maybe its a browser thing? - i am on chrome and see the font weight changes in each option. - The benefit of moving styling to the css block is to simplify the code base, to separate structure from style, to allow correct cascading, to allow easier editing and to improve readability of the code. - you should also do the same with your js - move all function code to an external js file and call it into the page. Better than doing in linejs - such as ... onclick="myFunction()"... it just better code structure to seaprate structure, style and function from each other and never cross the streams. – gavgrif Jun 24 '19 at 03:42
  • The screenshot was also taken on Chrome? – Crashalot Jun 24 '19 at 03:43
  • I couldn't add a screens hot to a comment - so added it to my answer - as ou can see there is slight weight difernce between A and but a stronger difference for C – gavgrif Jun 24 '19 at 03:57
  • Don't see a screenshot in the answer? You could try uploading the image here and sharing the link: imgur.com. Thanks! – Crashalot Jun 24 '19 at 04:09
  • sorry - uploaded bt forgot to hit hte save edit button -- eek – gavgrif Jun 24 '19 at 04:28
0

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>
Vintage Coders
  • 162
  • 1
  • 4