En este artículo, vamos a aprender cómo cambiar el color de fuente de la entrada deshabilitada. Existe un método para resolver este problema, que se analiza a continuación:
Enfoque: al agregar la propiedad CSS básica, podemos cambiar el color de fuente de una entrada deshabilitada. El elemento de entrada deshabilitado es inutilizable y no se puede hacer clic. Este es un atributo booleano. Aquí, usando la propiedad de color de entrada, podemos cambiar el color de fuente de este elemento de entrada deshabilitado.
A continuación se muestra la sintaxis y la implementación del enfoque anterior:
Sintaxis:
HTML:
<input disabled>
CSS:
input:disabled {
color: black;
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to change font-color for
disabled input using CSS?
</title>
<style>
input {
/*it makes grey background and
white font-color of a input*/
background: grey;
color: white;
}
input:disabled {
/*css declaration to make
font-color of disable input
black*/
color: black;
}
</style>
</head>
<body>
<form>
Enable Input : <input value="Enabled"><br>
<!-- Disabled this input using
attribute: disable -->
Disable Input: <input value="Disabled"
disabled><br>
</form>
</body>
</html>
Producción:
Explicaciones: El primer elemento de entrada está habilitado y el segundo elemento de entrada está deshabilitado. Al usar las propiedades de CSS, tenemos un fondo inicializado de todos los elementos de entrada en gris y el color de la fuente en blanco. Tenemos que cambiar el color de fuente blanco de la entrada deshabilitada a cualquier color.