1

必要なフィールドを含む単純な HTML5 フォームがあります。ページが読み込まれると、フィールドにはスタイルがありません。必須フィールドをクリックして何かを入力し、入力したテキストを消去してフィールドを終了すると、Firefox の無効なフィールドの外側にピンクのボックスの影が表示されます。

同じ動作を維持しながら、黄色のボックスシャドウが必要になりました。それが私がした方法です：

HTMLで

<input name="email_address" id="email_address_uuid_479823574" type="email"
       placeholder="ex. example@domain.com" title="Email address" required />

       -------
       -------

<input name="model_number" id="model_number_uuid_479823574" type="text"
       placeholder="ex. oxpd-983s" title="Equipment model number" required />

CSSで

input:required:invalid {box-shadow: 1px 2px 9px yellow};

結果: すべてのフィールドが黄色のボックス シャドウでページに読み込まれます。デフォルトの動作のように、ユーザーが onblur と onsubmit を間違えるのを待ちます。

動作を変更せずに無効なフィールドのデフォルトのボックスシャドウをオーバーライドする方法は?

4

1 に答える 1

0

試す：

input:required:-moz-ui-invalid {box-shadow: 1px 2px 9px yellow};

https://developer.mozilla.org/en/CSS/:invalidを参照してください

于 2012-07-05T16:34:20.360 に答える