☰

CSSを使用してチェックボックスにスタイルを設定する方法 質問する

tag-icon • tag-icon html css checkbox
CSSを使用してチェックボックスにスタイルを設定する方法 質問する

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

<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />

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

ベストアンサー1

アップデート：

以下の回答は、CSS 3 が広く利用可能になる前の状況を参照しています。最新のブラウザ (Internet Explorer 9 以降を含む) では、JavaScript を使用せずに、好みのスタイルでチェックボックスの置き換えを作成する方が簡単です。

役に立つリンクをいくつか紹介します:

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

古い回答

こちらはチェックボックスのスタイル設定に関する便利な記事基本的に、そのライターは、ブラウザによって大きく異なること、そして多くのブラウザではスタイル設定に関係なく常にデフォルトのチェックボックスが表示されることを発見しました。つまり、簡単な方法は本当にありません。

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

追加編集：ここにこれを実行する便利なスクリプト; 実際のチェックボックス要素を非表示にし、スタイル設定されたスパンに置き換えて、クリック イベントをリダイレクトします。

おすすめ記事