Elemento optgroup en HTML

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 contenidoNo hay.
Contenido permitidoElemento <option> cero veces o más. Pero puede que no contenga <optgroup> otro elemento.
AcrónimoLa 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 padreElemento <select>.
Interfaz DOMOHTMLOptGroupElement

Soporte de navegadores

ChromeFirefoxEdgeSafariÓpera
SoportadoSoportadoSoportadoSoportadoSoportado

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;
}