TextBox de sólo lectura o deshabilitado con CSS | IdleBit http://www.idlebit.es/2009/02/18/textbox-de-solo-lectura-o-deshabilitad...

Apuntes sobre programación con .NET, SQL y cualquier cosa

que deje declarar variables…

Blog
Contacto
Descargas
Regular Expression Tester

De nuevo nos encontramos ante una pregunta muy frecuente

entre los nuevos programadores web y más aún entre los nuevos
visitantes de idlebit.es. La respuesta es muy clara: NO se puede
crear un TextBox de sólo lectura o deshabilitado mediante CSS;
estas características son propiedades del control, no estilos.

Lo que sí que se puede hacer, es aplicar un estilo concreto a los

TextBox que tienen la propiedad disabled o readonly activada.
Esto lo vemos en el siguiente ejemplo, en el que asignamos un
color de fuente y fondo a los controles deshabilitados y de sólo
lectura:

1 de 6 07/03/2011 08:22 a.m.

TextBox de sólo lectura o deshabilitado con CSS | IdleBit http://www.idlebit.es/2009/02/18/textbox-de-solo-lectura-o-deshabilitad...

<style>
[disabled] {
background-color:#0c0;
color:#fff;
}
[readonly] {
background-color:#00c;
color:#fff;
}
</style>

Con este código cualquier control que tenga la propiedad

disabled activada aparecerá con el color de fondo en verde y los
que tengan la propiedad readonly lo tendrán de color azul. Eso
sí, en cualquier navegador menos en Internet Explorer.

Para terminar, si lo que queremos es deshabilitar un control

programáticamente, tendremos que recurrir a Javascript. Los
siguientes fragmentos de código asignan a dos controles HTML
que tienen los identificadores inputtext1 y inputext2 las
propiedades disabled y readonly respectivamente.

document.getElementById('inputtext1').disabled=true;
document.getElementById('inputtext2').readOnly=true;

o utilizando jQuery:

$('#inputtext1').attr('disabled', true);
$('#inputtext2').attr('readonly', true);
Entradas relacionadas:
2 de 6 07/03/2011 08:22 a.m.
TextBox de sólo lectura o deshabilitado con CSS | IdleBit http://www.idlebit.es/2009/02/18/textbox-de-solo-lectura-o-deshabilitad...

1. Cambiar el valor a un TextBox con atributo de

solo lectura De la misma forma que podemos asignar un
valor a un TextBox en modo password, también podemos
hacer que no podamos modificar el contenido de un TextBox,
pero si que se pueda cambiar mediante script. El ejemplo
claro es si tenemos una página en la que el valor de un...
2. ¿Cómo cambiar el valor de un TextBox
con jQuery? Analizando los registros de visitas, veo que esta
es una de las searchphrases que provocan más entradas
nuevas en el blog. Lo curioso de esto, es que no hay —hasta
hoy— ninguna entrada que trate este tema. Ante semejante
situación, he decidido actuar y continuar con una serie de
micro-entradas...
3. Asignar el valor a un TextBox en modo password Si
intentamos asignar desde servidor un valor a un control
TextBox que está configurado en modo password, .NET lo
ignora y no envía el contenido en la respuesta de la página, lo
que provoca que el control se muestre vacío. Para evitar
esto, la solución más sencilla es asignar el...

Publicado Miércoles, 18 de febrero de 2009 por Alex Casquete,

en 15 segundos, HTML, Programación.

Etiquetas: css, disabled, javascript, jquery, textbox

2 comentarios

3 de 6 07/03/2011 08:22 a.m.

TextBox de sólo lectura o deshabilitado con CSS | IdleBit http://www.idlebit.es/2009/02/18/textbox-de-solo-lectura-o-deshabilitad...

1. tiam dice:
8 de junio de 2009 en 22:32

muy buena explicacion gracias..

2. Federico dice:
29 de marzo de 2010 en 0:46

gracias por la explicacion

Deja un comentario

Nombre

Email

Web

En contacto

4 de 6 07/03/2011 08:22 a.m.

TextBox de sólo lectura o deshabilitado con CSS | IdleBit http://www.idlebit.es/2009/02/18/textbox-de-solo-lectura-o-deshabilitad...

Twitter
LinkedIn
YouTube
Delicious
Facebook

Últimas entradas

How-tos indispensables para el examen 70-516 (y III)

Personalizar la generación de base de datos para crear un
campo rowversion
How-tos indispensables para el examen 70-516 (II)
How-tos indispensables para el examen 70-516 (Modelado
de datos)
Enlazar un EntityDataReader con un DataGrid

RSS de las entradas

Suscripción por Email

5 de 6 07/03/2011 08:22 a.m.

TextBox de sólo lectura o deshabilitado con CSS | IdleBit http://www.idlebit.es/2009/02/18/textbox-de-solo-lectura-o-deshabilitad...

Los contenidos de idlebit.es están bajo una licencia de Creative

Commons si no se indica lo contrario.

Tema basado en un diseño de Rob Goodlate. HTML 5 válido.

6 de 6 07/03/2011 08:22 a.m.