5

こんにちは、次の問題があります。

いくつかのphpエラーメッセージについてフォームをチェックします。

エラーがない場合は、css設定を持っているだけです：

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

そして私のフォーカス設定：

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

さて、今私はこの行を変更しました:

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

エラーのクラスを追加すると：

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

問題は、私の設定が入力フィールドのクラスの詳細に対してのみ行われ、フォーカス設定では行われないことです:

.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;
}

なぜこれが機能しないのかを教えてくれる人がいれば、本当に感謝しています。どうもありがとう。

4

1 に答える 1

19

errorHTML にはのクラスがあり、CSS ではクラスをerr;に設定しています。一貫して同じ名前を使用する場合 (どちらを選択しても)、機能するはずです。

現在のHTML :

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

...そして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;
}

また、CSS では、そのクラス名を持つ要素ではなく、クラス名inputを持つ要素の子孫である を選択しています。したがって、完全に次のようなものを使用する必要があります。errinput

<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;
}
于 2012-07-22T20:52:31.597 に答える