P粉4289867442023-08-24 10:29:07
:after および :before 疑似クラスに付属する新機能を使用すると、非常にクールなカスタム チェックボックス効果を実現できます。この利点は、DOM に他に何も追加する必要がなく、標準のチェックボックスだけを追加するだけであることです。
これは互換性のあるブラウザでのみ機能することに注意してください。これは、入力要素に :after と :before を設定できない一部のブラウザに関係していると思います。残念ながら、これは現在 WebKit ブラウザのみがサポートされていることを意味します。 Firefox Internet Explorer では、スタイルを設定しないだけでチェックボックスを機能させることができますが、これは将来変更されることが予想されます (コードはベンダー プレフィックスを使用しません)。
これは単なる WebKit ブラウザ ソリューション (Chrome、Safari、モバイル ブラウザ)
P粉0186537512023-08-24 10:28:07
更新:
以下の回答は、CSS 3 が広く使用される前の状況に関するものです。 Internet Explorer 9 以降を含む最新のブラウザでは、JavaScript を使用せずに、お気に入りのスタイルで置換するチェックボックスを簡単に作成できます。
ここにいくつかの便利なリンクがあります:
根本的な問題は変わっていないことに注目する価値があります。スタイル (境界線など) をチェックボックス要素に直接適用して、それらのスタイルを HTML チェックボックスの表示に影響させることはまだできません。ただし、変わったのは、CSS だけを使用して、実際のチェックボックスを非表示にして、独自のスタイル要素に置き換えることができるようになったということです。特に、CSS では :checked セレクターが広くサポートされるようになったので、ボックスのチェック状態を正しく反映する置換を行うことができます。
古い答え
これは チェックボックスのスタイル設定に関する役立つ記事です 。基本的に、この作成者は、ブラウザによってこの設定が大きく異なり、どのようにスタイルを設定しても、多くのブラウザでは常にデフォルトのチェックボックスが表示されることに気づきました。したがって、実際には簡単な方法はありません。
JavaScript を使用してチェックボックスに画像をオーバーレイし、画像をクリックすると実際のチェックボックスがオンになるという回避策を想像するのは難しくありません。 JavaScript を使用していないユーザーには、デフォルトのチェックボックスが表示されます。
編集して追加: これは これを行う優れたスクリプトです ; これは実際のチェックボックス要素を非表示にし、スタイル付きスコープに置き換えて、クリック イベントをリダイレクトします。