css - para - Color de borde en el estilo de entrada predeterminado

input css examples

Question

Aquí hay una pregunta difícil ...

Tengo campos de entrada de estilo predeterminados (no se agregó css, solo ancho / alto / relleno), pero ahora quiero darle un borde rojo (estilo de error). ¿Cómo puedo hacer esto? La configuración del borde eliminará el estilo predeterminado de la entrada, la configuración del color del borde se verá rara, la configuración de un esquema funcionará en algunos casos (y no se ve tan bien en Firefox)

¿Algun consejo?

EDITAR: Vamos, chicos, lean la pregunta antes de responder. Quiero el aspecto predeterminado del navegador de la entrada , solo quiero darle un borde rojo.

Answer 1

Pensé que esto ya habría sido respondido, pero seguramente lo que quieres es esto: box-shadow: 0 0 3px # CC0000;

Ejemplo: http://jsfiddle.net/vmzLW/

Answer 2

Puedes usar jquery para esto utilizando el método addClass ()

CSS

 .defaultInput
    {
     width: 100px;
     height:25px;
     padding: 5px;
    }

.error
{
 border:1px solid red;
}

<input type="text" class="defaultInput"/>

Código Jquery

$(document).ready({
  $(''.defaultInput'').focus(function(){
       $(this).addClass(''error'');
  });
});

Actualización: Puedes eliminar esa clase de error usando

$(''.defaultInput'').removeClass(''error'');

No eliminará ese estilo predeterminado. Se eliminará solo la clase .error

Answer 3

Si entiendo tu pregunta correctamente esto debería resolverlo:

http://jsfiddle.net/wvk2mnsf/

HTML - crea un campo de entrada simple.

<input type="text" id="giraffe" />

CSS: borre el contorno nativo para que pueda establecer el suyo propio y no se vea raro con un contorno rojo azulado.

input:focus {
    outline: none;
}
.error-input-border {
    border: 1px solid #FF0000;
}

JS - al escribir en el campo establecido clase de borde rojo declarada en el CSS

document.getElementById(''giraffe'').oninput = function() { this.classList.add(''error-input-border''); }

Esto también tiene mucha información sobre los últimos estándares: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation

Answer 4

Si es una aplicación Angular puedes simplemente hacer esto

input.ng-invalid.ng-touched
{
    border: 1px solid red !important; 
}

Answer 5

color del borde: transparente; borde: 1px rojo sólido;

Answer 6

lo que realmente está mal con:

input { border: 1px solid #f00; }

¿Solo lo quieres en entradas con errores? En ese caso, asigne a la entrada una clase de error ...

input.error { border: 1px solid #f00; }