CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのappearanceプロパティを使ったカスタムチェックボックスの作り方

CSSのappearanceプロパティは、要素をユーザーのOSネイティブなスタイルに合わせて表示したり、逆にデフォルトの外観を無効化して独自のデザインを適用したりできる便利なプロパティです。この記事では、appearance: none;を活用して、チェックボックスを自由にカスタマイズする方法を解説します。

appearanceプロパティとは

通常、チェックボックスやラジオボタンなどのフォーム部品は、ブラウザやOSが提供する標準的な見た目で表示されます。appearanceプロパティにnoneを指定すると、このデフォルトスタイルを解除できるため、背景色・角丸・影などを自由に設定したオリジナルデザインのチェックボックスを作成できます。

構文

CSSのappearanceプロパティの基本構文は以下のとおりです。

Selector {
   appearance: /*値*/;
   -webkit-appearance: /*値*/; /* Safari・Chrome向け */
   -moz-appearance: /*値*/; /* Firefox向け */
}

ブラウザごとの互換性を確保するため、ベンダープレフィックス(-webkit-、-moz-)を併記しておくのが安全です。

例1: 影と角丸を活かした円形チェックボックス

以下の例では、チェックボックスのデフォルト外観を無効化し、シアン色の円形デザインにカスタマイズしています。チェックされた状態では、コーラル色の背景とコーンフラワーブルーの枠線が表示されます。

<!DOCTYPE html>
<html>
   <style>
      input[type=checkbox] {
         appearance: none;
         -webkit-appearance: none;
         -moz-appearance: none;
         padding: 12px;
         background-color: cyan;
         box-shadow: inset 0 3px 3px 5px lightgreen;
         border-radius:50%;
    }
      input[type=checkbox]:checked {
         background-color: coral;
         border: 6px solid cornflowerblue;
         box-shadow: 0 1px 2px lightorange;
    }
      input[type=checkbox]:checked:after {
         content:"Checked";
    }
   </style>
<body>
   <input type="checkbox"> カスタムチェックボックスのサンプル
</body>
</html>

未選択状態では緑がかった内側の影を持つシアンの円が表示され、チェックすると以下のように変化します。

CSSのappearanceプロパティを使ったカスタムチェックボックスの作り方

CSSのappearanceプロパティを使ったカスタムチェックボックスの作り方

例2: チェックマーク(✓)を表示するチェックボックス

次の例では、:checked疑似クラスと:before疑似要素を組み合わせ、チェック時に白色のチェックマーク「✓」(\2713)を表示しています。

<!DOCTYPE html>
<html>
   <style>
      input[type=checkbox] {
         appearance: none;
         -webkit-appearance: none;
         -moz-appearance: none;
         padding: 10px;
         background-color: cyan;
         border-radius:5%;
    }
      input[type=checkbox]:checked {
         background-color: magenta;
    }
      input[type=checkbox]:checked:before {
         content:"\2713";
         color: white;
         padding: initial;
         font-weight: bold;
    }
   </style>
<body>
   <input type="checkbox"> もうひとつのカスタムチェックボックスのサンプル
</body>
</html>

チェックすると、背景がマゼンタ色に変わり、中央に白いチェックマークが表示されます。

CSSのappearanceプロパティを使ったカスタムチェックボックスの作り方

CSSのappearanceプロパティを使ったカスタムチェックボックスの作り方

まとめ

appearance: none;を使えば、OS標準のフォーム部品の見た目を完全に制御できます。疑似クラス:checkedや疑似要素:before/:afterと組み合わせることで、JavaScriptに頼らずCSSだけでリッチなカスタムチェックボックスを実装可能です。サイトのデザインに合わせたフォームUIを作りたい場合に、ぜひ活用してみてください。

  1. CSSでカスタムスクロールバーを作成する方法｜::-webkit-scrollbarの使い方を実例付きで解説

    CSSを使えば、標準のスクロールバーのデザインを自由にカスタマイズできます。本記事では、::-webkit-scrollbar系の擬似要素を活用し、スクロールバーの幅・トラック・つまみ（サム）の色や形状を変更する具体的な方法をコード例とともに解説します。 カスタムスクロールバーのコード例 以下は、ページ全体に適用されるカスタムスクロールバーを作成するHTMLとCSSの完全なコード例です。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=

  2. CSS appearanceプロパティで作るカスタムラジオボタンの実装方法

    CSSのappearanceプロパティを使用すると、ユーザーのOS（オペレーティングシステム）が標準で備えるプラットフォームネイティブなスタイルに基づいて要素をスタイリングできます。このプロパティを「none」に設定すれば、ブラウザ既定の外観を無効化でき、ラジオボタンやチェックボックスなど、通常はスタイル変更が難しいフォーム部品も自由にデザインできるようになります。 appearanceプロパティの構文 CSSのappearanceプロパティの基本構文は以下のとおりです。 Selector { appearance: /*値*/; -webkit-appearance: /*値