make font weight bold for those Select Options that are enabled

I have a Select that has some Option in it. How can make font-weight: bold just for those options that are enabled?

Here is the sample code:

<select>
  <optgroup label="group1">
    <option value="2016" disabled>2016</option>
    <option value="2017" disabled>2017</option>
    <option value="2018" selected="selected">2018</option>
    <option value="2019">2019</option>
  </optgroup>
  <optgroup label="group2">
    <option value="2020" disabled>2020</option>
    <option value="2021">2021</option>
  </optgroup>
</select>

Using the :checked selector is most widely supported. This works for checkboxes and select lists. You can also select and style :disabled

However, be aware that some browsers don't support a lot of font changes inside the browser's select component. So color, weight, etc may or may not work depending on where it's viewed. Meaning you can't count on this for important interface/user feedback.

option { 
  font-weight: bold;
}
option:checked { 
  color: red;
}
option:disabled { 
  color: #dddddd;
  font-weight: normal;
}
<!-- this doesn't work in Chrome when wrapped in a Select -->
<select>
   <optgroup label="group1">
     <option value="2016" disabled>2016</option>
     <option value="2017" disabled>2017</option>
     <option value="2018" selected="selected">2018</option>
     <option value="2019">2019</option>
   </optgroup>
   <optgroup label="group2">
     <option value="2020" disabled>2020</option>
   </optgroup>
</select>

<!-- this works in Chrome -->
<optgroup label="group1">
  <option value="2016" disabled>2016</option>
  <option value="2017" disabled>2017</option>
  <option value="2018" selected="selected">2018</option>
  <option value="2019">2019</option>
</optgroup>
<optgroup label="group2">
  <option value="2020" disabled>2020</option>
</optgroup>

css select dropdown bold on some <option>'s, option:nth-child(1), option:nth-child(4) { font-weight:bold; } You can also build one of your own but it won't be input an input tag (you should� p.normal { font-weight: normal;} p.thick { font-weight: bold;} p.thicker { font-weight: 900;}

You can use :not selector like this:

option:not(disabled) {
  font-weight: bold;
}
<optgroup label="group1">
  <option value="2016" disabled>2016</option>
  <option value="2017" disabled>2017</option>
  <option value="2018" selected="selected">2018</option>
  <option value="2019">2019</option>
</optgroup>
<optgroup label="group2">
  <option value="2020" disabled>2020</option>
</optgroup>

font-weight, The available keywords are: normal; bold; bolder; lighter. The available numeric values are: 100� The nine font weights can not be relied on. These weights are dependent on weight subsets of a font being available. Whereas a font may contain nine weights, it may also contain fewer; simply for normal and bold, for example.

option:checked { font-weight: bold; }

Font styles in html select control - Get Started, hi, does anyone know if there is a way to put font styles into an html Select control for most browsers? so far select { font-size: .8em; font-weight: bold; font-family: verdana; } No, he wanted them on the options, because he wanted each unique. Powered by Discourse, best viewed with JavaScript enabled. So the same demo displayed with one of those fonts would display only two weights in the nine paragraphs. Using “bolder” and “lighter” keywords. The keyword values bolder and lighter are relative to the computed font weight of the parent element. The browser will look for the closest “bolder” or “lighter” weight, depending on

You should use an input like checkboxes then you can use the :checked css state

The rendering of a select is delegated to the OS/browser

I have tried

option[selected='selected'] { font-weight: bold; color: red; }

option:checked ... do not apply to select

Even applying a style inline don’t work ... as is a list of checkboxes could ... you for sure going to review your design ...

font-weight, The font-weight CSS property sets the weight (or boldness) of the font. Skip to main content; Select language; Skip to search Keyword values */ font-weight: normal; font-weight: bold; /* Keyword values relative to 800, and 900; non- variable fonts can only really make use of these set values, although� In earlier versions of the font-weight specification, the property accepts only keyword values and the numeric values 100, 200, 300, 400, 500, 600, 700, 800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g. 451) will be translated to one of these values for non-variable fonts using the

Cascading Style Sheets, designing for the Web – Chapter 2: CSS, As we explained in the previous chapter, HTML elements enable Web page designers to box) defines around 120 properties and we can assign values to all of them. All three rules have exactly the same declaration - they set the font to be bold. Now you have the basics of how to create CSS rules and style sheets. Dim MyFont As StdFont Private Sub ToggleButton1_Click() If ToggleButton1.Value = True Then MyFont.Bold = True 'Using MyFont alias to control font ToggleButton1.Caption = "Bold On" MyFont.Size = 22 'Increase the font size Else MyFont.Bold = False ToggleButton1.Caption = "Bold Off" MyFont.Size = 8 'Return font size to initial size End If TextBox1.Text = Str(MyFont.Weight) 'Bold and Weight are related End Sub Private Sub ToggleButton2_Click() If ToggleButton2.Value = True Then Label1.Font

Drop down list styling, drop down list styling 1, is there a way of editing the style of the drop-down menus in Dropdown list in excel are the options available in each cell for a user to the CSS box-shadow property to make the dropdown menu look like a " card". Style File Id: Select a value to enable an alternative style sheet definition for this� Text Color: Choose the color of your text. Under the Widget Setting > Style, click the icon to access the typography settings. Typography. Family - Choose your font family; Size - Choose a size for your font; Weight - Choose the weight of the font; Transform - Choose the Transform properties for the font; Style - Choose between Normal, Italic, and Oblique

A Guide to QuarkXPress 2019, To always create a new box for dragged-in content, press Option/Alt while dragging. mechanism to identify which of the bold face font styles should be selected. The faux style will be removed if the actual font style is enabled thereafter. Note: To copy the theme style from another application, make sure you open the Theme Roller window before selecting the Inspect option. Description of this image In the top menu, select Console, paste the code that you copied from the previous application, and click Enter.

Comments
  • Head's up that's only going to bold the selected option. Not all options != disabled
  • hmmm, but the Bryce-Howitson's solution code works fine for me.
  • It will not work on all browser due to the fact that the standard state that how it is rendered is upon OS/browser implementation choice It seem important to show it as a list of data within the page what will make css rules available