Restablecer el color del borde de un control de entrada (HTML / Javascript)

Question

¿Alguien sabe cómo restablecer el color del borde de un control de entrada una vez que se haya modificado usando javascript? Útil para la validación, poniendo de relieve los campos que tienen datos incorrectos o no válidos en ellos, etc.

por ejemplo. el cambio de la frontera:

document.getElementById('myinput').style.border = '1px solid red';

cómo restablecer? la siguiente línea sólo elimina completamente la frontera ...

document.getElementById('myinput').style.border = '';

Si se restablece el color del borde de vuelta a un color particular (por ejemplo, negro o gris, etc.), puede parecer extraña en algunos navegadores / sistemas operativos que tipo de 'tema' los controles ...

gracias montones!

Answer 1

No hacerlo con atributos de estilo de ajuste. Hacerlo mediante el uso de clases CSS. También recomendaría el uso de una biblioteca Javascript para manejar esto. Sólo hace que el código más limpio.

La eliminación de atributos CSS es problemático, ya que no siempre se sabe lo que se deben establecer de nuevo a. Adición y eliminación de las clases sólo ... obras.

Puede tener múltiples clases por elemento de modo que no hay realmente ningún argumento en contra de hacerlo de esta manera (en mi humilde opinión).

Estoy acostumbrado a jQuery así que mi ejemplo es con eso.

El camino equivocado:

$("#myinput").css("border", "1px solid red");

Forma correcta:

<style type="text/css">
.redborder { border: 1px solid red; }
</style>

<script type="text/javascript">
$("#myinput").addClass("redborder");
$("#myinput").removeClass("redborder");
$("#myinput").toggleClass("redborder");
</script>

Answer 2

Esto funciona para mí:

document.getElementById('myinput').style.removeProperty('border');

Answer 3

¿Simplemente desea que el borde se vaya? Yo no lo creo, como usted ha declarado que no es el caso.

La forma correcta de "reset" es definir como predeterminada. No estoy seguro de lo que es el valor por defecto, pero me imagino algo así como '1px negro' o similar.

Yo uso esta técnica comúnmente en una variedad de aplicaciones. Cuando no sé el valor por defecto, voy a establecer mi propio "por defecto" para que pueda repetirla. Una de mis técnicas favoritas, con las páginas web, es para establecer el color de fondo del control, en lugar de la frontera. Es muy visible y se puede elegir un color más apagado y aún así tener impacto. En ese caso, es muy fácil de configurar de nuevo a fondo blanco, que es el valor por defecto.