Cuando trabajas con formularios en una página web, es habitual encontrarte con campos deshabilitados que necesitas diferenciar visualmente para que el usuario entienda de inmediato que no puede modificarlos.
Cambiar el aspecto de un campo deshabilitado con CSS es muy sencillo, ya que existe un selector específico que permite modificar colores, bordes, fondos, opacidad y prácticamente cualquier característica visual.
En este tutorial vas a aprender cómo cambiar el diseño de los campos deshabilitados, cómo utilizar el selector :disabled y qué propiedades CSS resultan más interesantes para mejorar la experiencia de usuario.
🔎 Además, veremos varios ejemplos que puedes copiar directamente en tu web y adaptar fácilmente a cualquier formulario.
¿Qué es un campo deshabilitado en HTML?
Un campo deshabilitado es un elemento de formulario que aparece en pantalla pero que el usuario no puede editar, seleccionar o utilizar mientras tenga aplicado el atributo disabled.
Por ejemplo, puedes tener un campo como este:
<input type="text" value="Este campo está deshabilitado" disabled>El atributo disabled indica al navegador que ese elemento debe permanecer inactivo.
Este comportamiento puede aplicarse a diferentes elementos HTML como input, textarea, select, option y button, entre otros.
Puedes consultar más detalles sobre el atributo disabled en la documentación de HTML de MDN.
💡 El problema es que el diseño predeterminado que utilizan los navegadores para estos elementos no siempre encaja correctamente con la estética de tu página.
Por este motivo, utilizar CSS para personalizar los campos deshabilitados puede ayudarte a mantener un diseño mucho más coherente.
Cómo seleccionar un campo deshabilitado con CSS
CSS dispone de la pseudoclase :disabled, diseñada específicamente para seleccionar elementos que se encuentran deshabilitados.
El ejemplo más sencillo sería el siguiente:
input:disabled {
background-color: #eeeeee;
}Con este pequeño fragmento conseguirás que cualquier elemento input deshabilitado tenga un fondo gris claro.
La pseudoclase :disabled forma parte de los selectores estándar de CSS y puedes ampliar información en la documentación de MDN sobre .
🎨 A partir de aquí puedes añadir tantas propiedades como necesites para transformar completamente el aspecto del campo.
Cambiar el color de fondo de un campo deshabilitado
Una de las modificaciones más habituales consiste en cambiar el color de fondo para que el usuario pueda reconocer rápidamente los campos que no están disponibles.
Puedes utilizar este código:
input:disabled {
background-color: #f3f3f3;
}El resultado será un fondo gris suave que permite distinguir el campo sin romper visualmente el diseño del formulario.
Si tu página utiliza otro esquema cromático, simplemente tendrás que modificar el valor de background-color.
Cambiar el color del texto
También puedes modificar el color del texto de los campos deshabilitados para aumentar o reducir su contraste.
Por ejemplo:
input:disabled {
color: #777777;
}Esta combinación suele funcionar bien cuando utilizas un fondo claro porque permite transmitir visualmente que el campo está temporalmente inactivo.
⚠️ Procura no utilizar colores excesivamente claros porque podrías dificultar la lectura del contenido.
Cambiar el borde del campo deshabilitado
Otra posibilidad consiste en modificar el borde del elemento.
Puedes hacerlo utilizando:
input:disabled {
border: 1px solid #cccccc;
}También puedes combinar el borde con un fondo personalizado para crear un diseño más elaborado:
input:disabled {
background-color: #f5f5f5;
border: 1px solid #d5d5d5;
color: #777;
}✨ Con unas pocas propiedades puedes conseguir que tus formularios tengan un acabado mucho más cuidado y profesional.
Modificar la opacidad de los campos deshabilitados
La propiedad opacity también puede utilizarse para transmitir visualmente que un elemento no está disponible.
Por ejemplo:
input:disabled {
opacity: 0.6;
}Un valor de 1 representa la opacidad completa, mientras que valores inferiores hacen que el elemento sea progresivamente más transparente.
Sin embargo, conviene utilizar esta propiedad con moderación porque una opacidad demasiado baja puede perjudicar la legibilidad.
Cambiar el cursor sobre un campo deshabilitado
Una pequeña mejora de usabilidad consiste en cambiar el cursor del ratón cuando pasa por encima de un campo deshabilitado.
Puedes utilizar:
input:disabled {
cursor: not-allowed;
}De esta forma aparecerá un cursor indicando visualmente que la acción no está permitida.
🖱️ Este detalle puede parecer menor, pero ayuda al usuario a comprender inmediatamente que ese campo no puede modificarse.
Aplicar el diseño a todos los campos deshabilitados
Si tienes diferentes tipos de elementos dentro de tu formulario, puedes aplicar el mismo estilo a todos ellos.
Una posibilidad sería escribir:
input:disabled,
textarea:disabled,
select:disabled,
button:disabled {
background-color: #f3f3f3;
color: #777;
border: 1px solid #cccccc;
cursor: not-allowed;
}Este código modificará simultáneamente los input, textarea, select y botones deshabilitados.
También puedes utilizar directamente:
:disabled {
background-color: #f3f3f3;
color: #777;
}🌐 Este segundo método es más general porque seleccionará cualquier elemento compatible que se encuentre deshabilitado.
Cómo cambiar el diseño paso a paso
Si quieres personalizar los campos deshabilitados de tu página, puedes seguir este sencillo procedimiento:
- 🔍 Localiza el formulario cuyos campos quieres personalizar.
- 🧩 Comprueba que los elementos que quieres modificar utilizan el atributo
disabled. - 🎨 Añade el selector
:disableda tu hoja de estilos CSS. - 🖌️ Define propiedades como background-color, color, border, opacity o cursor.
- 💾 Guarda los cambios realizados en tu archivo CSS o en el apartado de CSS personalizado de tu gestor de contenidos.
- 🔄 Vacía la caché de tu página y actualiza el navegador para comprobar los cambios.
- 📱 Revisa el resultado tanto en ordenador como en móvil para asegurarte de que el campo continúa siendo perfectamente legible.
Ejemplo completo de diseño para campos deshabilitados
Si buscas un fragmento preparado para utilizar directamente, puedes empezar con este:
input:disabled,
textarea:disabled,
select:disabled,
button:disabled {
background-color: #f5f5f5;
color: #666666;
border: 1px solid #cccccc;
opacity: 0.8;
cursor: not-allowed;
}Este ejemplo consigue un aspecto discreto que permite identificar claramente los elementos inactivos sin hacer que desaparezcan visualmente del formulario.
Puedes modificar los colores, la opacidad o el borde para adaptarlos completamente a la identidad visual de tu web.
Diferencia entre disabled y readonly
Aunque pueden parecer similares, disabled y readonly no funcionan exactamente de la misma manera.
Un campo con disabled está completamente deshabilitado y normalmente no se envía junto con los datos del formulario.
Por el contrario, un campo con readonly no puede modificarse, pero su contenido continúa formando parte de los datos enviados por el formulario.
Un ejemplo de campo de solo lectura sería:
<input type="text" value="Contenido fijo" readonly>Puedes personalizar estos elementos utilizando:
input:read-only {
background-color: #fafafa;
}📌 Es importante tener presente esta diferencia antes de decidir qué atributo utilizar dentro de tu formulario.
Tabla resumen de propiedades CSS
| Propiedad | ¿Qué modifica? | Ejemplo |
|---|---|---|
| background-color | Color de fondo | background-color: #f5f5f5; |
| color | Color del texto | color: #777; |
| border | Borde del campo | border: 1px solid #ccc; |
| opacity | Transparencia | opacity: 0.7; |
| cursor | Cursor del ratón | cursor: not-allowed; |
| box-shadow | Sombra exterior o interior | box-shadow: none; |
| font-style | Estilo del texto | font-style: italic; |
Esta combinación de propiedades te permitirá crear prácticamente cualquier diseño para campos deshabilitados que puedas necesitar.
Cambiar únicamente una clase concreta
En determinadas situaciones quizás no quieras modificar todos los campos deshabilitados de tu página.
Puedes añadir una clase CSS específica al elemento:
<input class="campo-bloqueado" type="text" disabled>Después puedes utilizar:
.campo-bloqueado:disabled {
background-color: #fff3cd;
border-color: #ffe69c;
color: #664d03;
}🎯 De esta manera únicamente se modificarán los elementos que tengan la clase campo-bloqueado y además estén deshabilitados.
Esta técnica resulta especialmente interesante cuando tienes varios formularios con estilos diferentes dentro de una misma página.
Cómo hacerlo en WordPress
Si utilizas WordPress, normalmente no necesitarás modificar directamente los archivos de tu tema para añadir estos estilos.
Puedes acceder a las opciones de personalización de tu tema o utilizar el apartado correspondiente a CSS adicional, dependiendo de la plantilla o constructor que tengas instalado.
También puedes añadir el código mediante un tema hijo si necesitas una personalización más permanente y organizada.
⚙️ Si utilizas plugins de formularios como WPForms, Contact Form 7, Gravity Forms o Fluent Forms, quizá tengas que utilizar selectores adicionales para conseguir mayor especificidad.
Por ejemplo, para limitar el efecto a un formulario concreto puedes utilizar una clase contenedora:
.mi-formulario input:disabled {
background-color: #eeeeee;
color: #666666;
}Esto evita que el código afecte accidentalmente a otros formularios o elementos de la página.
Consejos para diseñar correctamente los campos deshabilitados
Un campo deshabilitado debe parecer diferente, pero su contenido debería continuar siendo fácil de leer.
🚫 Evita utilizar colores extremadamente claros que puedan hacer que el texto resulte prácticamente invisible.
🎨 Mantén cierta coherencia entre los colores del formulario y el diseño general de tu página.
👁️ Utiliza suficiente contraste entre el fondo y el texto para mantener una buena accesibilidad.
🖱️ Añadir cursor: not-allowed puede ayudarte a comunicar visualmente que el elemento no admite interacción.
📱 Comprueba siempre el diseño en diferentes tamaños de pantalla porque algunos formularios pueden utilizar estilos específicos para dispositivos móviles.
Conclusión
Cambiar el diseño cuando un campo está deshabilitado es una personalización muy sencilla gracias a la pseudoclase CSS :disabled.
Con unas pocas líneas puedes modificar el fondo, el texto, los bordes, la opacidad o incluso el cursor para que los campos inactivos encajen perfectamente con el diseño de tu web.
La opción más práctica para empezar es utilizar un selector como input:disabled y añadir únicamente aquellas propiedades que realmente necesites.
🎨 Si además utilizas clases específicas y selectores más precisos, tendrás un control absoluto sobre el aspecto de cada campo deshabilitado de tus formularios.
