<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
form {
display:inline-block;
border: 1px solid #2d98da;
color: #000000;
padding: 20px;
}
form.color {
background-color:#2d98da;
}
form label {
float:left;
margin:5px;
}
form input, form textarea {
float:right;
margin:5px;
}
</style>
</head>
<body>
<div>
<form class="color">
<div>
<label for="nombre">Nombre:</label><input id="nombre" name="nombre" type="text" />
</div>
<div>
<label for="apellidos">Apellidos:</label><input id="apellidos" name="apellidos" type="text" />
</div>
<div>
<label for="apellidos">texto:</label><textarea></textarea>
</div>
</form>
</div>
</body>
</html>
<script>
const elements=[...document.querySelectorAll("input, textarea")];
const form=document.querySelector("form");
elements.map(el => el.addEventListener("keyup", check));
function check() {
for (let i = 0; i < elements.length; i++) {
if (elements[i].value) {
form.classList.remove("color");
return true
}
}
form.classList.add("color");
return false;
}
</script>
Comentarios sobre la versión: 1 (0)
No hay comentarios