web-dev-qa-db-ja.com

Firefox 4必須の入力フォームREDボーダー/アウトライン

最近HTML5 jQueryプラグインを開発しましたが、FF4ベータ版の必須フィールドの赤い境界線を削除できません。

FFは必須フィールドにこの境界線/アウトラインを適用し、値が設定されると削除することに気付きました。問題は、古いブラウザで値属性を使用してプレースホルダーattrをエミュレートしていることです。したがって、赤い線が表示されないようにするには、この機能を備えたすべての入力が必要です。

プラグインはこちら のデモページで問題を確認できます

cssfirefoxjquery-pluginswebforms
55
matmancini

CSSで利用できる新しいHTML5フォーム機能のいくつかの新しい擬似セレクターがあります。おそらく:invalid。以下は、すべて MDC Firefox 4 docs からのものです。

  • :invalid CSS擬似クラスは、入力のタイプ設定に従って内容が検証されない要素に自動的に適用されます

  • :-moz-submit-invalid疑似クラスは、1つ以上のフォームフィールドが検証されない場合に、フォームフィールドの送信ボタンに適用されます。

  • :required擬似クラスは、必須属性を指定するフィールドに自動的に適用されるようになりました。 :optional擬似クラスは、他のすべてのフィールドに適用されます。

  • :-moz-placeholder疑似クラスが追加され、フォームフィールドのプレースホルダーテキストのスタイルを設定できるようになりました。

  • :-moz-focusring擬似セレクターを使用すると、要素にフォーカス表示をレンダリングする必要があるとGeckoが判断した場合に、要素の外観を指定できます。

101
jason

具体的には、そのスタイルを入力コントロールに適用する必要があります。

input:invalid {
    box-shadow: none;
}
65
WVDominick

このコードをすばやく簡単なソリューションとして使用する

:invalid {
  box-shadow: none;
}

:-moz-submit-invalid {
  box-shadow: none;
}

:-moz-ui-invalid {
  box-shadow:none;
}

参照： https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid

40
Mo.

必要なinputをform属性を持つnovalidateにラップします

<form novalidate>
    <input required>
</form>
1
Andrew Luca

これを試してください、

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

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

0
Anoop Velluva