¿Alguien puede indicarme la dirección correcta para mi problema? Escribí una regla que delineará mi cuadro de entrada cuando no se envíe ningún valor. Pero ahora me gustaría eliminar el contorno rojo cuando empiezo a escribir en el cuadro de entrada. ¿Sugerencias?
CSS
.placeholder-red-text { border: 1px solid #ff0000 !important; }JS
return x.classList.add('placeholder-red-text');HTML
<input id="red-border-error"></input>Puede usar otro atributo de su entrada para establecer el estilo, puedo pensar en tres ejemplos simples:
1: Haga la entrada requerida y verifique si la entrada es válida
.foo { outline: 2px } .foo:valid { outline: 0 }y en tu html
<input class="foo" required>2: haz lo mismo con un atributo de datos y algunos js como este
const fooEl = document.querySelector('.foo') fooEl.addEventListener('input', (e) => { fooEl.setAttribute('data-foo', e.target.value) }) .foo { outline: 2px yellow solid; } .foo:not([data-foo=""]) { outline: 0; } <input type="text" class="foo" data-foo="">3: Igual que antes, pero configurando una nueva clase, o simplemente configurando un valor booleano para el atributo de datos en lugar del valor.