8

私のウェブサイトには多くのフォームがあり、もちろん、それらのフィールドの多くは必須です。必須フィールドが空のままの場合、「エラー」クラスが割り当てられ、テキスト フィールド、ドロップダウン メニュー、チェックボックスのいずれであっても、フィールドを赤で丸で囲もうとしています。css ファイルに次のコードがあります。

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

不思議なことに、IE ではうまく動作しますが、Chrome では要素を検査するときに CSS が適用されていることがわかりますが、チェックボックスは赤で囲まれません。

そして、これは上記の css コードがアクティブな場合は無関係かもしれませんが、私の css ファイルには何か他のものがあります:

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

これは、チェックボックスがIE8以下で正しく表示されるようにするために使用されます。

Chrome で赤い枠線を視覚化する方法はありますか?

編集: ここに jsfiddle があります: http://jsfiddle.net/PCD6f/3/

4

3 に答える 3

19

そのようにしてください（セレクターが間違っていました：.error input、.error select、.error textarea）：

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

これがjsFiddleです

特にチェックボックスを使用する場合outline: 2px solid #F00;は、境界線がまだ表示されることに注意してください。入力フィールドのスタイルを設定して、複数のブラウザで見栄えを良くするのは難しく、信頼できません。

完全にカスタム スタイルのチェックボックスについては、このGistのこのjsFiddleを参照してください。

編集して遊ぶ：outline-offset: 10px;

于 2013-07-17T10:40:14.263 に答える
0

アウトラインのみが機能しません。

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

于 2016-10-20T09:54:47.083 に答える