Deshabilitar un cuadro de texto con CSS

Cómo deshabilitar un cuadro de texto en CSS? Actualmente tenemos un cuadro de texto en nuestra vista que se puede activar/desactivar dependiendo de una propiedad en el modelo. Estamos teniendo asp.net MVC view; dependiendo del valor de la propiedad del Modelo, necesitamos renderizar un cuadro de texto o un cuadro de texto de solo lectura. estábamos pensando en hacer esto al aplicar CSS al control de vista. ¿Alguien ha hecho esto antes?Deshabilitar un cuadro de texto con CSS

Fuente

2010-03-16 Balaji

Tenga en cuenta que hay una diferencia sutil entre 'readonly' y' disabled'. En ambos casos, el valor no es editable, pero el primero enviará el valor al lado del servidor de todos modos, mientras que el último no lo hará. Además, el último tiene en la mayoría de los webbrowsers un estilo predeterminado diferente (más oscuro/gris). – BalusC

CSS no puede deshabilitar el cuadro de texto, sin embargo, puede desactivar la visualización o la visibilidad.

display: none; 
visibility: hidden;

O también se puede establecer el HTMLattribute:

disabled="disabled"

Fuente

2010-03-16 22:24:41

No se puede deshabilitar nada con CSS, eso es un problema funcional. CSS está diseñado para problemas de diseño. Puede dar la impresión de que se está deshabilitando un cuadro de texto, al configurar colores descoloridos.

Para realidad desactivar el elemento, se debe utilizar el atributo booleano discapacitados:

<input type="text" name="lname" disabled />

Demostración: http://jsfiddle.net/p6rja/

O, si lo desea, puede establecer este a través de JavaScript:

document.forms['formName']['inputName'].disabled = true;

Demostración: http://jsfiddle.net/655Su/

Tenga en cuenta que las entradas deshabilitadas no pasarán sus valores cuando publique datos en el servidor. Si desea mantener los datos, pero no permite editarlos directamente, puede estar interesado en configurarlo en el readonly.

// Similar to <input value="Read-only" readonly> 
document.forms['formName']['inputName'].readOnly = true;

Demostración: http://jsfiddle.net/655Su/1/

esto no cambia la interfaz de usuario del elemento, por lo que tendría que hacer eso mismo:

input[readonly] { 
    background: #CCC; 
    color: #333; 
    border: 1px solid #666 
}

También puede dirigirse a cualquier elemento de discapacitados:

input[disabled] { /* styles */ }

Fuente

2010-03-16 22:24:00 Sampson

No se puede deshabilitar un cuadro de texto en CSS. Deshabilitarlo no es una tarea de presentación, tendrás que hacer esto en el marcado HTML usando el atributo disabled.

Puede juntar algo colocando el cuadro de texto debajo de un elemento transparente absolutamente posicionado con índice Z ... Pero eso es una tontería, además necesitaría un segundo elemento HTML de todos modos.

Puede, sin embargo, estilo cuadros de texto con discapacidad (si eso es lo que quiere decir) en el CSS usando

input[disabled] { ... }

de IE7 hacia arriba y en todos los demás navegadores más importantes.

Fuente

2010-03-16 22:24:19

** simplemente copiar y pegar este código y ejecutar se puede ver el cuadro de texto deshabilitado **

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Untitled Document</title> 

<style>.container{float:left;width:200px;height:25px;position:relative;} 
     .container input{float:left;width:200px;height:25px;} 
     .overlay{display:block;width:208px;position:absolute;top:0px;left:0px;height:32px;} 
</style> 
</head> 
<body> 
     <div class="container"> 
     <input type="text" value="[email protected]" /> 
     <div class="overlay"> 
     </div> 
     </div> 
</body> 
</html>

Fuente

2010-06-28 12:30:41

** El código sin explicación es generalmente una mala respuesta en Stack ** De todos modos, esto hace muy poco por una gran cantidad de código. Solo da la apariencia de estar deshabilitado y de una manera bastante desordenada. Si un desarrollador acepta esto como válido, podría fácilmente usar un 'input.disabled' y agregar la clase a través de javascript, según sea necesario. También podría usar un manejador de eventos en 'focus' para' blur'. Soluciones que se adaptan fácilmente a más de un elemento. –

Yendo más lejos en Pekka de respuesta, tenía un estilo "style1" en algunos de mis cuadros de texto. Se puede crear un "style1 [desactivado]" estilo tan sólo que el estilo de los cuadros de texto con discapacidad el uso de "style1":

.style1[disabled] { ... }

funcionaba bien en IE8.

Fuente

2011-01-19 17:34:30 GBU

'style1' es un nombre de clase terrible. ¿Fue generado por una herramienta? – alex

@alex Haha no, el nombre es una especie de cadena de pt-br torpe así que usé "style1". – GBU

se puede desactivar a través de CSS:

pointer-events: none;

No funciona en todas partes sin embargo.

Fuente

2012-03-27 03:11:16 abbie

La entrada de texto todavía se puede tabular en. – alex

'pointer-events: none' no es compatible con IE 8, 9, es para elementos SVG solo en 10, y finalmente se admite en 11, de acuerdo con las publicaciones en http://stackoverflow.com/questions/5855135/css -pointer-events-property-alternative-for-ie – vapcguy

Intente esto.

<asp:TextBox ID="tb" onkeypress="javascript:return false;" width="50px" runat="server"></asp:TextBox>

Esto no permitirá que se ingresen caracteres dentro del TextBox.

Fuente

2013-03-13 11:24:46

Cuidado con esto. Los usuarios aún pueden hacer clic derecho y elegir pegar desde el menú contextual para pegar datos en el cuadro de texto. –

Deshabilitar un cuadro de texto con CSS

Respuesta

Cuestiones relacionadas