「画像追加しました」html requiredで入力がエラーに引っかかるときの枠の色

Question

バリデーションを実装するために、required を使用している部分があるのですが、

引っかかるときに変わる枠の色が、
クロームだと青（水色？）
firefoxだと細い線の赤
IEだと太い線の赤になります。

この色を変更/統一したいのですが
border-colorでは変えたいところが変わってくれません。

ブラウザ毎に違う動きのものは変更出来ないのでしょうか？

～追記～
＜以下IE＞

青い所は自分でinvalidセレクタで指定したスタイルです。
赤はIEの既存のもののようです

この赤い部分の変更をしたいと思っています。

Answer 1

:invalid等のCSS3の疑似セレクタを使うことである程度カスタマイズが出来るようです。
参考: HTML5 Form Validation のカスタマイズ

---

追記

ブラウザ間の違いも大きいようですので、HTML5の機能で頑張ることはすっかりさっぱり諦めて、JavaScriptでvalidationした方が早いかも知れません。jQueryを使ったvalidatorプラグインもありますし、CSSフレームワークにBootstrapを使っているならBootstrap Validatorを使った方が良いかもしれません。

Comments

[yzccdefine]

回答ありがとうございます。

枠を作ることはある程度の枠内のようなのですが

バリデーションのチェックの際に出てくる枠はどうも指定がみつかりません；；

[raccy]

Firefoxですと、box-shadowで設定されているようです。
https://developer.mozilla.org/ja/docs/Web/CSS/:invalid
"box-shadow: none"とか設定してみて下さい。

[yzccdefine]

なるほど　あれを影としてみてるんですか！！

ありがとうございます！！

Answer 2

:invalidというセレクタを使うことで、バリデーションに引っかかった要素にだけスタイルを当てることができます。

CSS 4らしいですが、IE 10以上を含め大体のブラウザで対応しているとのことです（情報）。

Comments

[yzccdefine]

回答ありがとうございます
上記のborder-colorがinvalidセレクタで行っているものになります。
そのinvalidでエラーの際に割り当てたスタイルの周りを覆う様にある色は変更可能なのでしょうか？