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 lo ha modificado usando javascript? Útil para la validación resaltando los campos que tienen datos incorrectos o no válidos en ellos, etc.

E.g. cambiando el borde:

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 ese tipo de 'tema' los controles ...

gracias montones!

Answer 1

No lo hagas con atributos de estilo de configuración. Hágalo mediante el uso de clases de CSS. También recomendaría usar una biblioteca Javascript para manejar esto. Simplemente hace que el código sea más limpio.

Eliminar los atributos CSS es problemático porque no siempre se sabe a qué se debe volver. Agregar y eliminar clases simplemente ... funciona.

Puede tener varias clases por elemento, por lo que realmente no hay ningún argumento en contra de hacerlo de esta manera (imho).

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

manera incorrecta:

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

manera 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

simplemente desea la frontera se vaya? No lo creo, ya que has dicho que no es el caso.

La forma correcta de "restablecer" es configurar de manera predeterminada. No estoy seguro de cuál es el valor predeterminado, pero adivinaría algo como '1px black' o similar.

Uso esta técnica comúnmente en una variedad de aplicaciones. Cuando no conozco el valor predeterminado, estableceré mi propio "valor predeterminado" para poder repetirlo. Una de mis técnicas favoritas, con páginas web, es establecer el color de fondo del control, en lugar del borde. Es muy visible y puede elegir un color más apagado y aún así tener impacto. En ese caso, es muy fácil volver a establecer el fondo en blanco, que es el predeterminado.

Answer 3

Esto funciona para mí:

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