Me gustaría cambiar el CSS para casillas de verificación deshabilitadas en una grilla (son demasiado difíciles de ver para los usuarios). ¿Cuál es una forma simple de hacer esto?¿Cómo establecer CSS para casillas de verificación deshabilitadas?
Mi preferencia en las tecnologías utilizadas (en orden descendente):
CSS
JavaScript
jQuery
Otros
Sugeriría cambiar el color del fondo (el background-color de la forma/conjunto de campos), y ver si se puede obtener un mejor contraste. (? no seleccionables) Si lo que desea es cambiar el color de las casillas de verificación con discapacidad que puede probar:
input[disabled] {
...
/* CSS here */
...
}
Pero si son discapacitados por una razón, seguro que no es necesario ser muy a la vista? El objetivo de que estén atenuados es, seguramente, evitar la confusión entre los elementos activos/habilitados y los inactivos/deshabilitados?
No podríamos hacer esto en CSS, ya que nuestra base de usuarios está utilizando IE. Sin embargo, hicimos esto programáticamente en los controles de casilla de verificación en .NET. –
@Even Mien: Sería bueno si dijeras cómo lo hiciste, es decir, qué atributo estableciste. –
@Christopher consulte mi respuesta a continuación para obtener el código ASP.Net. – David
he tenido buena suerte con algunas bibliotecas JS para hacer el trabajo. De acuerdo, mi requisito era hacer que las cajas se vean muy diferentes de la casilla de verificación estándar. La siguiente biblioteca es incluso 508 compatible.
básicamente, tiene que adjuntar el evento onclick en div, p, o cualquier otro elemento utilizado para una rejilla y luego transferir el valor registrado en el elemento oculto asociado a ese campo en una cuadrícula. que es muy trivial, si se usa javascript - marque jquery para agregar el evento onclick en cualquier elemento. si se hace clic, establezca el valor = 1 para el elemento oculto.
input:disabled {} funciona para todos los navegadores excepto-lo adivinó-IE. Para IE, supongo que tendrás que usar alguna biblioteca JS.
Sí, definitivamente necesito IE ya que eso es el 100% de mi base de usuarios. –
Mantenga activa la casilla de verificación, pero luego agregue onfocus=this.blur() a la casilla de verificación para que no se pueda hacer clic en ella.
O si el uso de ASP.net (como usted dice en su comentario) mantener la casilla de verificación para establecer habilitado y añadir el siguiente al evento Page.Load:
CheckBox1.Attributes.Add("onclick", "return false;");
¡Gracias! ¡Muy útil! – Darxis
@ Blue Steel: según la pregunta, el usuario ha pedido una solución de CSS: "¿Cómo establecer CSS para las casillas de verificación deshabilitadas?" –
@IT persona: Cambió sus requisitos en un comentario anterior diciendo que no podía usar CSS pero necesitaba hacerlo programáticamente. También menciona que está usando una casilla de verificación ASP.Net. – David
Si usted tiene una forma con una mezcla de casillas de verificación habilitadas o deshabilitadas, tener deshabilitadas las casillas de verificación desactivadas evita confusiones para el usuario. Si la intención es mostrar una página de solo vista con casillas de verificación (por ejemplo, para mostrar las opciones del producto seleccionadas en un recibo de compra) entonces reemplazar los elementos de entrada de casillas con imágenes puede dar mejores resultados.
Reemplazar
<input type="checkbox" disabled>
<input type="checkbox" disabled checked>
con
<img src="unchecked.gif">
<img src="checked.gif">
realidad con un poco de CSS3 puede burlarse de una solución muy simplista. Siempre tendrá que considerar qué tipo de soporte desea ofrecer. Pero si está de acuerdo con que funcione en navegadores modernos, solo pruébalo.
Aquí está el HTML
<label>
<input type="checkbox" name="test" />
<span>I accept terms and cons</span><br><br>
<button>Great!</button>
</label>
Aquí está la CSS
button { display: none}
:checked ~ button {
font-style: italic;
color: green;
display: inherit;
}
y aquí está la DEMO http://jsfiddle.net/DyjmM/
Si bien es genial, no es relevante para la pregunta aquí. Estaba preguntando cómo cambiar el aspecto de la casilla de verificación desactivada, y esta publicación no aborda eso en absoluto. –
¡eso es muy amable de su parte! – jgtoriginal
favor ser más descriptivo, es lo que necesita Javascript solución? – dusoft