注: Google で検索してみましたが、探しているものが見つかりませんでした。
ブラウザには、フォーム要素のレンダリングに使用するデフォルト スタイルがいくつかありますが、これはブラウザごとに異なります。選択、ラジオ、チェックボックスなどのフォーム要素のネイティブ ブラウザ スタイルをすべてリセットして、ブラウザ間で一貫した外観にする方法はありますか?
簡単な例を作成しました：
フォーム要素 http://grab.by/grabs/34db87ee1ad93e031cc72808feb2c8e7.png
ご覧のとおり、フォーム要素のレンダリングはわずかに異なります。私が望むのは、IE、Firefox、およびWebkit用に、それらをリセットして似たスタイルにすることができるいくつかのスタイルです。
では、どうやってこれを行うのですか？必要なすべてのスタイルを含む css スタイルシートへのリンクはすばらしいでしょう。
短い答え:できません。
長い答え: できますが、痛みが予想されます。
私は見栄えの良いラジオボタン、チェックボックス、および選択を「手先の早業」のjavascript + cssでハックしました。基本的に、入力がロードされた直後にそれを非表示にして、イベントがバインドされたラベル/divに置き換えて、それらが正しい入力であるかのように動作させ、cssでそのように見せます。イベントは、フォームの残りの部分と共に正しい値が送信されるように、基礎となる入力も更新します。スクリプトの barfs または JS がオフの場合、ユーザーは通常のコントロールを取得します。
面白くなかったが、結果はまずまず。
私はIEがそれを混乱させるのを見るのを楽しみにしていません:)
私は以下からインスピレーションを得ました：
http://sourceforge.net/projects/selectreplace/?showfeed=code
これは古い質問ですが、CSS ルール-webkit-appearance:noneを追加すると、デフォルトの Webkit スタイリング (Mobile Safari の丸薬の形をしたボタンなど) を削除するのに役立つ場合があります。
