私はスタイル付きフォームを使用しており、多くのjQueryプラグインを組み合わせて、<select>やなどのフォーム要素のスタイルを設定してい<input type="checkbox" />ます。これらのプラグインは、元のフォーム入力を非表示にし、それらをスタイル可能な代替HTML要素のセット（、、、<div>など）<a>に置き換えます<ul>。[required]唯一の問題は、ユーザーが必須フィールドに入力せずにフォームを送信しようとすると、属性を処理してブラウザ（Firefox、Chrome）のボックスシャドウ効果を適用していないように見えることです。[required]これらの属性を置換要素に変換する簡単な方法はありますか？[required]プラグインを拡張して、属性を置換要素にコピーしてもらうだけですが、<div>タグがサポートしているとは思えません[required]。私はインターネットを見回しましたが、役立つガイドの邪魔になるものはあまり見つかりませんでした。私が見逃している回避策はありますか？どうすればいいのかわからない。
本格的なクライアント側の検証を使用できると思いますが、jQuery/JavaScriptの介入を最小限に抑えようとしています。これを行う良い方法がない場合は、フォーム検証プラグインなどを使用します。今のところ、スタイルの一貫性を保つために、いくつかのCSSですべてのボックスシャドウ効果を無効にしました。
input:invalid, input:required,
textarea:invalid, textarea:required,
select:invalid, select:required {
-webkit-box-shadow: none;
-moz-box-shadow: none;
-box-shadow: none;
}