web-dev-qa-db-ja.com

Firefox 4：必須のフォーム入力から赤い境界線を削除する方法はありますか？

フォームフィールドで必須が定義されている場合、Firefox 4は、ユーザーが送信ボタンを押す前であっても、この要素に赤い境界線を自動的に表示します。

<input type="text" name="example" value="This is an example" required />

ユーザーは最初は間違いを犯していないので、これはユーザーを悩ませていると思います。

初期状態ではその赤い境界線を非表示にしますが、必要に応じてマークされていないフィールドがある場合、ユーザーが送信ボタンを押すと表示されます。

私は見た :requiredおよび:invalid新しい擬似セレクターから。ただし、変更は検証の前後と後に対するものです。 （ Firefox 4必須の入力フォームREDボーダー/アウトライン ）

ユーザーがフォームを送信する前に赤い境界線を無効にし、不足しているフィールドがある場合に表示する方法はありますか？

attributesborderfirefox4required
72
Cyril N.

これは少しトリッキーでしたが、私はこの例を設定しました： http://jsfiddle.net/c5aTe/ これは私のために働いています。基本的に、トリックは無効なプレースホルダーテキストを回避するようです。そうでなければ、これを行うことができるはずです：

input:required {
    box-shadow:none;
}
input:invalid {
    box-shadow:0 0 3px red;
}

または類似のもの...

[〜＃〜] but [〜＃〜]FF4はプレースホルダーテキストを検証することを決定したため（理由はわかりません...） （少しハック-!importantを使用）が必要です。

お役に立てば幸いです！

[〜＃〜] edit [〜＃〜]

Doh !!-私は愚かな気分だ。フィドルを更新しました： http://jsfiddle.net/c5aTe/2/ -:focus疑似クラスを使用して、ユーザーがタイピング。これは、アイテムがフォーカスを失ったときにコンテンツが無効な場合でも赤で強調表示されますが、設計された動作でできることはあまりないと思います...

HTH :)

承認後に編集：

OPのリクエストでの例の概要（最初の2つはFF4専用に設計されていることに注意してください-Chromeではありません）

  1. プレースホルダーのテキストを検証するFFの修正： http://jsfiddle.net/c5aTe/
  2. 入力時のFF検証の修正： http://jsfiddle.net/c5aTe/2
  3. スタイル/検証を切り替えるJSソリューション： http://jsfiddle.net/c5aTe/4
132
Stuart Burrows

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;
}
31
Dan

私にとっては非常に簡単な解決策があります。基本的に、basicallyい赤を非常に良い青に変更しました。これは、不要なフィールドの標準色であり、Webの規則です。

:required {
    border-color: rgba(82, 168, 236, 0.8);
}
2
Randy Greencorn

試してください：

document.getElementById('myform').reset();
1
Andriy

これは私にとってはうまくいきました：

input:invalid {
     -moz-box-shadow: none;
}
1
WVDominick

これを試してください、

$（ "form"）。attr（ "novalidate"、true）;

グローバル.jsファイルまたはヘッダーセクションのフォーム用。

0
Anoop Velluva