L'application de la frontière à une case à cocher dans Chrome

J'ai beaucoup de formes sur mon site avec, bien sûr, de nombreux champs de la leur. Si nécessaire, le champ est laissé vide, il est affecté à une "erreur" de la classe et je suis en train de le cercle le champ en rouge peu importe si c'est un champ de texte, le menu déroulant ou une case à cocher.
J'ai le code suivant dans mon fichier css:

.error input, .error select, .error textarea {
    border-style: solid;
    border-color: #c00;
    border-width: 2px;
}

Maintenant, curieusement, cela fonctionne bien sous IE, mais en Chrome les cases à cocher ne sont pas entourés en rouge même si je peux voir que le CSS est appliqué lors de l'inspection de l'élément.

Et peut-être hors de propos dans le code css ci-dessus est actif mais j'ai quelque chose d'autre dans mon fichier css:

input[type=checkbox] {
    background:transparent;
    border:0;
    margin-top: 2px;
}

Et qui est utilisé de sorte que les cases à cocher s'affichent correctement dans IE8 et moins.

Des idées comment je peux visualiser la bordure rouge dans Chrome?

EDIT:
Voici un jsfiddle:
http://jsfiddle.net/PCD6f/3/

veuillez inclure un jsFiddle
plz inclure jsfiddle
Elle est ici: jsfiddle.net/PCD6f/3

OriginalL'auteur mmvsbg | 2013-07-17

  1. 18

    Juste faire comme si (votre sélecteurs étaient erronées: .erreur de saisie .erreur de sélectionner, de .erreur textarea):

    input[type=checkbox] {
    outline: 2px solid #F00;
}

    Voici la jsFiddle

    Spécifiquement pour un case utilisation outline: 2px solid #F00;, MAIS gardez à l'esprit que la frontière sera toujours visible. Le style des champs de saisie pour les regarder bien à travers de multiples navigateurs est difficile et peu fiable.

    Complètement personnalisé case, voir ce jsFiddle de cette Gist.

    MODIFIER Jouer avec: outline-offset: 10px;

    Bonjour, je vous remercie! À l'origine, je l'ai eu de cette façon, cependant, les entrées sont à l'intérieur d'un div qui contient la classe "erreur". Si je le fais de cette façon, la case à cocher obtient des cercles avec la ligne rouge, mais alors l'étiquette à côté de est a la même frontière et ce qui est laid et c'est pourquoi j'essaie juste appliqué sur les entrées. jsfiddle.net/PCD6f/3
    Voici quelque chose de plus comme ça: jsfiddle.net/PCD6f/5 je suis en train de cercle de la case à cocher, seule, sans l'étiquette, puis l'entrée de champ de texte ci-dessous.
    Comment à ce sujet: jsfiddle.net/achudars/PCD6f/6
    la Dernière tentative complètement personnalisé case à cocher: jsfiddle.net/achudars/8wW74 Source: gist.github.com/stucox/2556785
    Bien le médaillon n'a pas aidé comme il l'a gardé en l'ajoutant à la frontière. Cependant, j'ai fini par changer de la frontière du reste des éléments de contour par votre suggestion et maintenant il fonctionne bien dans tous les browers. Voici la solution: jsfiddle.net/PCD6f/8 Merci beaucoup!

    OriginalL'auteur acudars

  2. 3

    L'application de la frontière à une case à cocher dans Chrome

    De Case à cocher, Bouton Radio le Style CSS de la Frontière, sans aucune image ou de contenu. Juste pur css.

    L'application de la frontière à une case à cocher dans Chrome

    JSFiddle Lien ici

        input[type="radio"]:checked:before {
display: block;
height: 0.4em;
width: 0.4em;
position: relative;
left: 0.4em;
top: 0.4em;
background: #fff;
border-radius: 100%;
content: '';
}

/* checkbox checked */
input[type="checkbox"]:checked:before {
content: '';
display: block;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-left: 4px;
margin-top: 1px;
}
    La meilleure solution que j'ai trouvé. Merci.

    OriginalL'auteur Velu S Gautam

  3. 0

    Fonctionne pour moi.seul plan ne fonctionne pas.

    input[type=checkbox].has-error{
    outline: 1px solid red !important;
    }

    J'ai essayé et ça n'a pas la bordure rouge.

    OriginalL'auteur swati sharma