Elemento optgroup en HTML

El elemento html optgroup crea un conjunto de opciones dentro del elemento <select>. Un ejemplo simple de usar el elemento <optgroup> tres veces dentro de <select> un elemento con la propiedad disabled:

< select > 
  < optgroup  label = "group 1" > 
    < option > option 1.1 </ option > 
  </ optgroup >  
  < optgroup  label = "group 2" > 
    < option > option 2.1 </ option > 
    < option > option 2.2 </ option > 
  </ optgroup > 
  < optgroup  label = "grupo 3" inhabilitado > 
    <option > Opción 3.1 </ option > 
    < option > Opción 3.2 </ option > 
    < option > Opción 3.3 </ option > 
  </ optgroup > 
</ select >

Etiqueta html optgroup

Clasificaciones de contenido	No hay.
Contenido permitido	Elemento `<option>` cero veces o más. Pero puede que no contenga `<optgroup>` otro elemento.
Acrónimo	La etiqueta de inicio es obligatoria, la etiqueta de finalización es opcional si el elemento es seguido inmediatamente por `<optgroup>` otro elemento o el elemento principal no contiene ningún otro contenido.
Elementos del padre	Elemento `<select>`.
Interfaz DOMO	`HTMLOptGroupElement`

Soporte de navegadores

Chrome	Firefox	Edge	Safari	Ópera
Soportado	Soportado	Soportado	Soportado	Soportado

Características

En este elemento html optgroup se pueden utilizar propiedades globales.

`disabled`

Si se establece este valor booleano, el usuario no podrá elegir ninguna opción en el grupo, y los navegadores generalmente muestran estas opciones en plateado y no recibirán eventos como clics o foco.

`label`

El nombre del conjunto de opciones, que el navegador puede utilizar para mostrar un nombre para el conjunto de opciones en la interfaz de usuario.

Tenga en cuenta que esta función es obligatoria.

Formato predeterminado

La mayoría de los navegadores renderizan el elemento <optgroup> con la propiedad establecida display en block, y hacen que font-weight (font-weight) sea más grueso de lo normal:

optgroup {
  font-weight: bolder;
  display: block;
}