CSS 3: pseudoclase de estado de elemento UI
Última actualización el Martes, 25 de Mayo de 2010 17:35 Escrito por Susanna
Web - CSS - 1655 lecturas
Pseudoclase de estado de elemento UI
CSS 3 incorpora muchas nuevas pseudoclases, en este artículo se describe el uso de la pseudoclase de estado de elemento UI.
:enabled y :disabled
La pseudoclase :enabled representa un elemento de interfaz de usuario que se encuentra en estado habilitado. Alternativamente, la pseudoclase :disabled representa un elemento de interfaz de usuario que se encuentra en estado deshabilitado.
Por ejemplo:input:enabled{ background-color:#fff; border:#333 1px solid; }
/* aplica a los elementos de tipo input habilitados */
input:disabled{ background-color:#CCC; border:#333 1px solid; }
/* aplica a los elementos de tipo input deshabilitados */
:checked
Los elementos input de tipo radio y checkbox pueden ser activados por el usuario. Algunos elementos de menú se “marcan” cuando el usuario los selecciona. Cuando estos elementos son marcados se aplica la pseudoclase :checked.
Por ejemplo:input [type="checkbox"]:checked{ outline:#0C3 1px solid; }
/* aplica a los elementos de tipo input checkbox marcados */
:indeterminate
Los elementos input de tipo radio y de tipo checkbox además de poder ser marcados por el usuario, pueden encontrarse en un estado indeterminado, ni marcado ni desmarcado. Esto puede ser debido a un atributo del elemento, o la manipulación del DOM.
Por ejemplo:input [type="checkbox"]:indeterminate{ outline:#ccc 1px solid; }
/* aplica a los elementos de tipo input checkbox con estado indeterminado */
Nota: no todos los elementos de un documento web presentan los estados anteriormente descritos. Habitualmente estas pseudoclases se aplican a controles de formulario. La pseudoclase :enabled es aplicable a todos los controles de tipo <input>, <file>, <select>, <textarea>, <date>, <month>, etc. mientras que por ejemplo, la pseudoclase :checked se aplica principalemente a <input> de tipo radio o checkbox.