フォーム フィールドで required が定義されている場合、Firefox 4 は、ユーザーが送信ボタンを押す前であっても、この要素に赤い境界線を自動的に表示します。
<input type="text" name="example" value="This is an example" required />
ユーザーは最初から間違いを犯していないので、これはユーザーにとって不安なことだと思います。
初期状態ではその赤い境界線を非表示にしますが、必須としてマークされた欠落フィールドがある場合、ユーザーが送信ボタンを押したときに表示します。
私は新しい疑似セレクターを見ましたが、変更は:required検証前と検証後のものです。( Firefox 4 Required input form RED border/outlineより):invalid
ユーザーがフォームを送信する前に赤い境界線を無効にし、欠落しているフィールドがある場合に表示する方法はありますか?
これは少しトリッキーでしたが、私はこの例を設定しました：http: //jsfiddle.net/c5aTe/これは私のために働いています。基本的に、トリックは無効なプレースホルダーテキストを回避することのようです。それ以外の場合は、これを実行できるはずです。
input:required {
box-shadow:none;
}
input:invalid {
box-shadow:0 0 3px red;
}
または同様のもの...
しかし、FF4がプレースホルダーテキストを検証することを決定したため（理由はわかりません...）、フィドルのソリューション（少しハッキー-使用!important）が必要です。
お役に立てば幸いです。
編集
ドー!! -ばかげている。フィドルを更新しました：http：//jsfiddle.net/c5aTe/2/-疑似クラスを使用して:focus、ユーザーが入力している間、要素のスタイルを有効であるかのように保つことができます。アイテムがフォーカスを失ったときにコンテンツが無効である場合、これはまだ赤で強調表示されますが、設計された動作でできることはそれほど多くないと思います...
HTH :)
OPの要求による例の要約（最初の2つはFF4専用に設計されており、Chromeではないことに注意してください）
Firefox 26 の時点で、無効な必須フィールドを識別するために使用される実際の CSS は次のとおりです (forms.css から取得)。
:not(output):-moz-ui-invalid {
box-shadow: 0 0 1.5px 1px red;
}
他のブラウザーで複製するには、次を使用します。
input:invalid {
box-shadow: 0 0 1.5px 1px red;
}
ピクセル設定をいじってみましたが、moz ソースを見ずに 1.5px を推測することはできませんでした。
無効にするには、次を使用できます。
input:invalid {
box-shadow: none;
}
これは私にとってはうまくいきました：
input:invalid {
-moz-box-shadow: none;
}