web-dev-qa-db-fra.com

Couleur de bordure sur le style de saisie par défaut

voici une question délicate ...

J'ai des champs de saisie de style par défaut (aucun css ajouté, seulement la largeur/hauteur/remplissage), mais maintenant je veux lui donner une bordure rouge (style d'erreur). Comment puis-je faire ceci? Définir simplement border supprimera le style par défaut de l'entrée, définissant uniquement border-color aura une apparence bizarre, définir un contour fonctionnera dans certains cas (et son apparence est moins bonne dans Firefox).

Des conseils?

EDIT: Allez les gars, lisez la question avant de répondre. Je veux le look par défaut du navigateur de l'entrée , je veux juste lui donner une bordure rouge.

cssinputborder
22
tbleckert

J'aurais pensé qu'on aurait déjà répondu à cela - mais ce que vous voulez, c'est sûrement ceci:

Exemple: http://jsfiddle.net/vmzLW/

17
mattbee

Vous pouvez utiliser jquery pour cela en utilisant la méthode addClass ()

CSS 

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

.error
{
 border:1px solid red;
}

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

Jquery Code

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

Mettre à jour: Vous pouvez supprimer cette classe d'erreur à l'aide de 

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

Cela ne supprimera pas ce style par défaut. Il supprimera uniquement la classe .error

15
KillerFish

quoi de mal à:

input { border: 1px solid #f00; }

le voulez-vous uniquement sur les entrées avec des erreurs? dans ce cas, donnez à l'entrée une classe d'erreur ...

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

S'il s'agit d'une application angulaire, vous pouvez simplement le faire.

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

Si je comprends bien votre question, cela devrait résoudre le problème:

http://jsfiddle.net/wvk2mnsf/

HTML - crée un champ de saisie simple.

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

CSS - effacez le contour natif afin de pouvoir définir le vôtre et cela n’a pas l’air bizarre avec un contour bleu-rouge.

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

JS - lors de la saisie dans l'ensemble de champs classe de bordure rouge déclarée dans le CSS

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

Vous y trouverez également de nombreuses informations sur les dernières normes: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation

2
Christopher Grigg

border-color: transparent; bordure: 1px rouge uni;

0
Alexandre Vieira