6

ボックスとそれに関連する CSS アウトライン スタイルに問題があります。ボックスがフォーカスされると、青色のアウトラインが表示されます (動作中)。フォーム検証で問題が発生した場合、.error クラスが追加され、アウトラインと背景色が赤に変更されます (機能しません)。

焦点を合わせて、私はスタイルを持っています:

input, select {
    font-size: 10pt;
    border: solid 1px #9598a0;
    padding: 2px;
}

input:focus{
    background: #EFF5FF;
    color: black;
    outline: solid 2px #73A6FF;
}

エラーの場合:

input.error:focus, .error {
    outline: 2px solid red;
    background: rgb(255,240,240);
}

問題は、フォーカスのないアウトラインが入力ボックスの外側にあり、フォーカスのあるアウトラインがボックスの内側にあるため、クリックすると要素がジャンプすることです(CHROME)。

この画像を見てください：

ここに画像の説明を入力

1 つ目はフォーカスあり、2 つ目はフォーカスなしでエラー、3 つ目はフォーカスありでエラーです。フォーカスがない場合、境界線がオブジェクトの外側に拡張されることに注目してください。

これを修正する良い方法はありますか？

4

2 に答える 2

5

Outline -offsetを明示的に設定してみてください。任意の有効な値 (構文セクションを参照) を使用する必要がありますが、要素内でアウトラインを移動するには、負の値を適用できます。次に例を示します。

JSFiddle

input {
    background: #EFF5FF;
    outline: solid 2px #73A6FF;
    outline-offset: -2px;
}

input.error {
    outline: 2px solid red;
    background: rgb(255,240,240);
}

Chrome について質問していますが、outline-offset プロパティは IE ではサポートされていないことに注意してください。

于 2017-04-26T17:11:42.757 に答える
2

everyoutlineを to に変更しborder、基本inputセレクターに透明な境界線 (たとえば灰色でもかまいません) を与えて、2 番目の入力を周囲にプッシュしないようにします。

input{
    font-size: 10pt;
    border: solid 1px #9598a0;
    padding: 2px;
    border: solid 2px transparent;
}
input:focus{
    background: #EFF5FF;
    color: black;
    border: solid 2px #73A6FF;
}

input.error:focus{
    border: 2px solid red;
    background: rgb(255,240,240);
}

.error {
    border: 2px solid red;
    background: rgb(255,240,240);
}
于 2013-02-12T01:37:08.217 に答える