CSS Select Dropdown Bold on Some <Option>'s

css select dropdown bold on some option's

you could use :nth-child(N)

option:nth-child(1), option:nth-child(4) {
    font-weight:bold;
}

Demo: http://jsfiddle.net/Sotiris/sqshN/

Find more info and browser support for this pseudo-class at http://reference.sitepoint.com/css/pseudoclass-nthchild

Partially Bold Text in an HTML select

No; it's not possible.

Instead, you can make a fake dropdown list using Javascript.

Select dropdown option bold in chrome

You cannot do this. The most likely solution you'll find "out there" would be to add a surrounding span with hard coded style, but neither IE (7) nor Firefox (3.0.12) honor this.

What you can do is use a JavaScript solution to give you the appearance of a select without actually using a select.

And here's a great "howto" on how to do it: http://www.devirtuoso.com/2009/08/styling-drop-down-boxes-with-jquery/

How can I change the font-size of one select box option text (select2) with css?

The solution:

http://jsfiddle.net/jEADR/3730/

<select  id="e1" class="select2" style="width:300px">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>
        <option value="WY">Wyoming</option>
    </select>

    <select  id="e2" class="select2" style="width:300px">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>
        <option value="WY">Wyoming</option>
    </select>

<script>
$(".select2").select2();
$("#e2").select2({ dropdownCssClass: "myFont" });
</script>

.myFont{
  font-size:4px;
}

Modify Select So Only The First One Is Gray

Here is a more modern solution so it's not specific to the first option, but rather an invalid option and requires no JS to show only the title/placeholder option as grey whereas the rest appear normal.

select,
select option {
  color: #000000;
}

select:invalid,
select option[value=""] {
  color: #999999;
}

label {
  display: block;
  margin: 16px 0;
}

/*Added for browser compatibility*/
[hidden] {
  display: none;
}

<label>
    Invalid option cannot be selected and is hidden from the user in the dropdown.
    <select required>
      <option value="" selected disabled hidden>Please select your favourite fruit</option>
      <option>Apple</option>
      <option>Banana</option>
    </select>
</label>

<label>
    Invalid option cannot be selected, but is not hidden from the user in the dropdown.
    <select required>
      <option value="" selected disabled>Please select your favourite fruit</option>
      <option>Apple</option>
      <option>Banana</option>
    </select>
</label>

<label>
    Invalid option can be selected and is not hidden from the user in the dropdown.
    <select required>
      <option value="" selected>Please select your favourite fruit</option>
      <option>Apple</option>
      <option>Banana</option>
    </select>
</label>

make font weight bold for those Select Options that are enabled

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>

how to make font-weight:bold ,if table tbody tr td value greater than 0 without loop

Without looping, and since values get set client side, you could combine the CSS attr(), a pseudo element like ::after and an attribute selector.

When your client side routine set a value, it does so to the attribute data-value="" instead of inside the element itself, and when done like that, you can use this CSS to style the cells

table td {  background: #eee;}
table td::after {  content: attr(data-value);  padding: 10px;}
table td[data-value="0"] {  color: green;}
table td:not([data-value="0"]) {  color: white;  background: green;}

<table id="example">  <tr>    <td data-value="0"></td>    <td data-value="1"></td>    <td data-value="2"></td>  </tr></table><table id="myTable">  <tr>    <td data-value="1"></td>    <td data-value="0"></td>    <td data-value="3"></td>  </tr></table>

What is making my HTML select options become bold?

Really strange issue that I've never ran into before, but the problem was that I had the font - Inter in this case - locally installed, and for some reason <select> <option> elements (at least in Firefox, because the issue wasn't reproducible in Chrome) prefer the locally installed version of the font. Uninstalling the font locally was the only workaround to this I could find, but either way it's a local system issue and not one that affects end users - unless they have the Inter font installed, I suppose. Like I said, a very weird issue.

---

Related Topics