¿alguno podría decirme de que forma puedo hacer que mi textarea en un formulario html, tenga un color de fondo y cuando se empiece escribir sobre ella cambie a blanco?
Un saludo,
¿alguno podría decirme de que forma puedo hacer que mi textarea en un formulario html, tenga un color de fondo y cuando se empiece escribir sobre ella cambie a blanco?
Un saludo,
Con CSS es muy fácil (fiddle):
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo</title>
<style>
.tomatxt{background:#ff6347}
.tomatxt:focus{background:#fff}
</style>
</head>
<body>
<form>
<textarea class="tomatxt" rows="6" cols="40" placeholder="Ejemplo..."></textarea>
</form>
</body>
</html>
La pseudo-clase :focus
hace un gran trabajo aquí!
Leí tu comentario y reemplacé id="tomatxt"
(#tomatxt{}
) con class="tomatxt"
(.tomatxt{}
).
Si desea aplicar el estilo a todas las textarea
de su página, entonces también está bien:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo</title>
<style>
textarea{background:#ff6347}
textarea:focus{background:#fff}
</style>
</head>
<body>
<form>
<textarea rows="6" cols="40" placeholder="Ejemplo..."></textarea>
</form>
</body>
</html>
Para resumir, #tomatxt{}
asigna el estilo a solo una textarea
, .tomatxt{}
a más de una (todas las con class="tomatxt"
), textarea{}
a todas.
Lo siento pero solo hablo italiano y utilicé el traductor de Google :)
Este es el text area que en principio aparecerá en color de fondo gris:
<textarea rows="6" cols="50">
Este textarea cambiará de color al detectar el click.
</textarea>
<textarea rows="6" cols="50">
Este también cambiará de manera dinamica als er recorrido con un for.
</textarea>
Con el siguiente Script se detecta cuando se haga click en el text area y entonces cambia el color de fondo a blanco:
<script>
window.onload = function() {
let elementos = document.getElementsByTagName("textarea");
for (var i = 0 ; i < elementos.length; i++) {
elementos[i].addEventListener('click', function() {
this.style.backgroundColor = "white";
});
}
}
</script>
Aunque te recomiendo poner el color gris de fondo en tu archivo css o ponerlo en linea (css en linea). Espero te sirva.