propiedad - CSS3: pseudo-clase no verificada

pseudo elements css

Question

Sé que hay una CSS3 oficial :checked pseudoclase :checked , pero ¿hay una :unchecked marcar, y tienen el mismo soporte de navegador?

La referencia de Sitepoint no menciona uno, sin embargo, esta especificación whatwg (sea lo que sea) lo hace.

Sé que se puede lograr el mismo resultado cuando las pseudo-clases :checked y :not() se combinan, pero sigo sintiendo curiosidad:

input[type="checkbox"]:not(:checked) {
/* styles */
}

Editar:

El w3c recomienda la misma técnica

Se puede seleccionar una casilla de verificación sin marcar utilizando la pseudoclase de negación:

:not(:checked)

Answer 1

Creo que estás tratando de complicar demasiado las cosas. Una solución simple es simplemente diseñar su casilla de verificación de forma predeterminada con los estilos sin marcar y luego agregar los estilos de estado marcados.

input[type="checkbox"] {
// Unchecked Styles
}
input[type="checkbox"]:checked {
// Checked Styles
}

Me disculpo por traer un hilo viejo pero sentí que podría haber usado una mejor respuesta.

EDITAR (3/3/2016):

Las especificaciones W3C indican que :not(:checked) como su ejemplo para seleccionar el estado no verificado. Sin embargo, esto es explícitamente el estado no verificado y solo aplicará esos estilos al estado no verificado. Esto es útil para agregar estilos que solo se necesitan en el estado no verificado y que deberían eliminarse del estado verificado si se usan en el selector de input[type="checkbox"] . Vea el ejemplo a continuación para aclaración.

input[type="checkbox"] {
/* Base Styles aka unchecked */
font-weight: 300; // Will be overwritten by :checked
font-size: 16px; // Base styling
}
input[type="checkbox"]:not(:checked) {
/* Explicit Unchecked Styles */
border: 1px solid #FF0000; // Only apply border to unchecked state
}
input[type="checkbox"]:checked {
/* Checked Styles */
font-weight: 900; // Use a bold font when checked
}

Sin usar :not(:checked) en el ejemplo anterior, el selector :checked habría necesitado usar un border: none; para lograr el mismo afecto

Use la input[type="checkbox"] para el estilo base para reducir la duplicación.

Utilice la input[type="checkbox"]:not(:checked) para los estilos explícitos no verificados que no desea aplicar al estado verificado.

Answer 2

La forma en que manejé esto fue cambiar el nombre de clase de una etiqueta en función de una condición. De esta manera, solo necesita una etiqueta y puede tener diferentes clases para diferentes estados ... ¡Espero que ayude!

Answer 3

No hay: pseudo clase no verificada; sin embargo, si usa la pseudoclase: checked y el selector de hermanos, puede diferenciar entre ambos estados. Creo que todos los navegadores más recientes admiten la pseudoclase comprobada, puede encontrar más información de este recurso: http://www.whatstyle.net/articles/18/pretty_form_controls_with_css

Obtendrá una mejor compatibilidad con el navegador con jquery ... puede usar una función de clic para detectar cuándo ocurre el clic y si está marcada o no, entonces puede agregar una clase o eliminar una clase según sea necesario ...

Answer 4

:unchecked no está definido en los Selectores o las especificaciones de nivel 3 de UI CSS, ni ha aparecido en el nivel 4 de Selectores.

De hecho, la cita de W3C está tomada de la especificación de los Selectores 4 . Debido a que el Selector 4 recomienda usar :not(:checked) , es seguro suponer que no hay pseudo correspondiente :unchecked marcar. El soporte del navegador para :not() y :checked es idéntico, por lo que no debería ser un problema.

Esto puede parecer inconsistente con los estados :enabled y :disabled , especialmente porque un elemento no se puede habilitar ni deshabilitar (es decir, la semántica no se aplica por completo), sin embargo, no parece haber ninguna explicación para esta incoherencia.

( :indeterminate no cuenta, porque un elemento tampoco puede ser desmarcado, verificado ni indeterminado porque la semántica no se aplica).

Answer 5

<style>
input, span {
background: red;
}
:indeterminate, :indeterminate + span {
background: limegreen;
}
</style>
</head>
<body>
<input type="checkbox"> <span>Everything in this paragraph should have a green background.</span>
<script type="text/javascript">
document.getElementsByTagName("input")[0].indeterminate = true;
</script>