Styling Option Group Label

Styling option group label

Use attribute Selector

[label]
{
color: red;
}

EDIT

<select>
<optgroup label="Cars">
<option>Honda</option>
<option>Merc</option>
</optgroup>
<optgroup label="Bikes">
<option>Kawasaki</option>
<option>Yamaha</option>
</optgroup>
</select>

optgroup[label="Cars"]
{
color: red;
}

optgroup[label="Bikes"]
{
color: blue;
}

option
{
color: black;
}

How to change the style of a select's optgroup label?

Unfortunately select boxes are one of the few things that you can add very little style to with CSS. You are usually limited to how the browser renders it.

For example, it looks like this in chrome:

And this in Firefox:

styles on optgroup

Use the CSS selector select optgroup instead.

Be aware that not every browser will respect optgroup rules (Webkit, for example). With that in mind, you might like to try a jQuery plugin that allows complete, cross-browsing styling of form elements; such as Uniform.

Style label in md-optgrp

you can use text-transform property in css to convert to lowercase

.md-optgroup label {
text-transform: lowercase;
}

Is there any way to style optgroup using CSS on the iPad?

Unfortunately, there isn't a way to do it. iPad Safari takes full control of styling select lists' internal contents. Here's a reference for verification: little link.

One way to achieve this this would be to simulate the dropdown/select menu using JavaScript. It's not very preferable, but if you require to change the default styling, then I'm afraid it's the only way to go; here's a demo that should give you an idea on how to do the simulation: another little link.

Angular material: changing background color of optiongroup doesn't work

You can fix it by adding display: block rule to that mat-optgroup tag:

<mat-optgroup style="background-color: rgb(0, 168, 255, 0.5); display: block">
                                                                  ^^^^^^^^^^^^^^

Or you can add the same in your component css file:

mat-optgroup {
    display: block;
    background-color: rgb(0, 168, 255, 0.5);
}

Stackblitz Example

Not able to change styling of OptGroup of ant design

There are some antd CSS classes that can't be overridden through CSS-in-JS like styled-components or emotion. It depends on when the css style applied within the antd implementation (you should inspect the dom tree).

It includes overriding ant-select-dropdown-menu-item-group-title, in this case, you only can do it via .css file:

/* App.css */
.ant-select-dropdown-menu-item-group-title {
  font-size: 30px;
}

// App.jsx
import './App.css';

---

Related Topics