css sur les différentes classes d'entrée

bonjour, j'ai le problème suivant:

je dois vérifier ma forme pour le php messages d'erreur.

en cas d'absence d'erreur j'ai simplement mon css réglage:

.wrapper #frame form fieldset ul input {
    color: #f23;
    font-size: 10px;
    height: 18px;
    padding-left: 5px;
    margin-top: 3px;
    outline:none;
}

et mes réglages de mise au point:

.wrapper #frame form fieldset ul input:focus{
    color:#fff;
    font-weight: bold;
    border: 2px solid #fff;
}

bon, maintenant, j'ai modifié cette ligne:

<input type="text" id="normal" name="1" value=""/>

avec l'ajout de la classe d'erreur:

<input class="err" type="text" id="normal" name="1" value=""/>

le problème est que mes paramètres, il suffit de prendre la place de ma classe de détails sur le champs de saisie, mais pas sur mes réglages de mise au point:

.err {
    color: #444444;
    font-size: 10px;
    width: 180px;
    height: 18px;
    padding-left: 5px;
    outline:none;   
    background-image: url(../images/error.png);
}
.err input:focus{
    color:#f23;
    font-weight: bold;
    border: 2px solid #f23;
}

donc si il y a quelqu'un qui pourrait me dire pourquoi cela ne fonctionne pas je serait vraiment apprécier. merci beaucoup.

OriginalL'auteur bonny | 2012-07-22

  1. 14

    Vous avez une classe de error dans votre code HTML, et dans votre CSS, vous avez défini la classe de err; si vous utilisez le même nom de constante (selon votre choix), il doit travailler.

    Votre actuel HTML:

    <input class="error" type="text" id="normal" name="1" value=""/>

    ...et CSS:

    .err {
    color: #444444;
    font-size: 10px;
    width: 180px;
    height: 18px;
    padding-left: 5px;
    outline:none;   
    background-image: url(../images/error.png);
}
.err input:focus{
    color:#f23;
    font-weight: bold;
    border: 2px solid #f23;
}

    Aussi, dans votre CSS, vous êtes à la sélection d'une input c'est un descendant d'un élément avec le err de nom de classe, pas un input élément avec que de nom de classe. Donc, vous devriez utiliser quelque chose comme:

    <input class="err" type="text" id="normal" name="1" value=""/>

input.err {
    color: #444444;
    font-size: 10px;
    width: 180px;
    height: 18px;
    padding-left: 5px;
    outline:none;   
    background-image: url(../images/error.png);
}
input.err:focus{
    color:#f23;
    font-weight: bold;
    border: 2px solid #f23;
}
    d'accord,c'est tout. merci beaucoup.

    OriginalL'auteur David Thomas