CSS のヒント: CSS を使用してチェックボックスのスタイルを設定する方法

Question

次を使用してチェックボックスのスタイルを設定しようとしています:

リーリー

しかし、スタイルは適用されません。チェックボックスには引き続きデフォルトのスタイルが表示されます。特定のスタイルを与えるにはどうすればよいですか?

Answer 1

:after および :before 疑似クラスに付属する新機能を使用すると、非常にクールなカスタム チェックボックス効果を実現できます。この利点は、DOM に他に何も追加する必要がなく、標準のチェックボックスだけを追加するだけであることです。

これは互換性のあるブラウザでのみ機能することに注意してください。これは、入力要素に :after と :before を設定できない一部のブラウザに関係していると思います。残念ながら、これは現在 WebKit ブラウザのみがサポートされていることを意味します。 Firefox Internet Explorer では、スタイルを設定しないだけでチェックボックスを機能させることができますが、これは将来変更されることが予想されます (コードはベンダー プレフィックスを使用しません)。

これは単なる WebKit ブラウザ ソリューション (Chrome、Safari、モバイル ブラウザ)

フィドルの例を見る

リーリー リーリー リーリー

追加の Webkit スタイル反転フィドル

リーリー リーリー リーリー

Answer 2

更新:

以下の回答は、CSS 3 が広く使用される前の状況に関するものです。 Internet Explorer 9 以降を含む最新のブラウザでは、JavaScript を使用せずに、お気に入りのスタイルで置換するチェックボックスを簡単に作成できます。

ここにいくつかの便利なリンクがあります:

• CSS のみを使用してカスタム フォーム チェックボックスを作成する李>
• シンプルな CSS チェックボックス ジェネレーター
• チェックボックスハックでできること
• CSS3 を使用してカスタム チェック ボックスとラジオ ボタンを実装する
• CSS を使用してチェックボックスのスタイルを設定する方法

根本的な問題は変わっていないことに注目する価値があります。スタイル (境界線など) をチェックボックス要素に直接適用して、それらのスタイルを HTML チェックボックスの表示に影響させることはまだできません。ただし、変わったのは、CSS だけを使用して、実際のチェックボックスを非表示にして、独自のスタイル要素に置き換えることができるようになったということです。特に、CSS では :checked セレクターが広くサポートされるようになったので、ボックスのチェック状態を正しく反映する置換を行うことができます。

---

古い答え

これは チェックボックスのスタイル設定に関する役立つ記事です 。基本的に、この作成者は、ブラウザによってこの設定が大きく異なり、どのようにスタイルを設定しても、多くのブラウザでは常にデフォルトのチェックボックスが表示されることに気づきました。したがって、実際には簡単な方法はありません。

JavaScript を使用してチェックボックスに画像をオーバーレイし、画像をクリックすると実際のチェックボックスがオンになるという回避策を想像するのは難しくありません。 JavaScript を使用していないユーザーには、デフォルトのチェックボックスが表示されます。

編集して追加: これは これを行う優れたスクリプトです ; これは実際のチェックボックス要素を非表示にし、スタイル付きスコープに置き換えて、クリック イベントをリダイレクトします。