チェック ボックス コントロールのスタイルを指定する方法 (HTML)

  • [アーティクル]

[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

多くの CSS プロパティと擬似クラスで checkbox のスタイルを指定できます。 このトピックでは、一般に使われているプロパティと擬似クラスの一部を取り上げて説明します。

理解しておく必要があること

テクノロジ

必要条件

便利な CSS プロパティ

CSS には、HTML 要素のスタイル指定に使用できる多くのプロパティが用意されています。ただし、このプロパティには膨大な数があり、残らず目を通すことは気が遠くなる作業です。そこで、ここでは checkbox コントロールのスタイル指定にとりわけ便利な CSS プロパティを一部抜粋して一覧にしています。

  • background
    checkbox の表面の背景を指定します。この例では、チェック ボックスの背景をグラデーションにしています。

    #backgroundExampleCheckbox {
    background: -ms-linear-gradient(green, blue );
}

        <label>
        <input id="backgroundExampleCheckbox" type="checkbox" />Option
    </label>

    背景がグラデーションのチェック ボックス

  • border
    checkbox の境界線の太さ、線のスタイル、色を指定します。

    この例では、チェック ボックスに赤色の境界線を追加しています。

    #borderExampleCheckbox {
    border: 1px solid red;
}

        <label>
        <input id="borderExampleCheckbox" type="checkbox" />Option
    </label>

    赤色の境界線があるチェック ボックス

(使用できる CSS プロパティはここに挙げたものがすべてではありません。CSS プロパティの一覧の完全版については、「カスケード スタイル シートのリファレンス」をご覧ください。)

チェック ボックス コントロールのスタイルを指定するための擬似要素

checkbox コントロールには、コントロールの特定部分のスタイルを指定するためにセレクターとして使うことができる次の擬似要素が用意されています。

  • ::-ms-check
    チェック ボックスのチェック マークに 1 つ以上のスタイルを適用します。

    この例では、チェック ボックスのチェック マークを緑色にします。

    #checkExampleCheckbox::-ms-check {
    color: green;
}

        <label>
        <input id="checkExampleCheckbox" type="checkbox" checked />Option
    </label>

チェック ボックス コントロールのスタイルを指定するための擬似クラス

このコントロールでは、このコントロールが特定の状態にある場合にこのコントロールのスタイルを指定するためにセレクターとして使うことができる、次の擬似クラスをサポートします。

  • :checked
    オンになった (選択された) 状態の checkbox にスタイルを適用します。

  • :indeterminate
    不確定状態の checkbox にスタイルを適用します。

  • :hover
    ユーザーが checkbox の上にカーソルを置いているものの、クリックしてアクティブ化していないときの checkbox にスタイルを適用します。

  • :active
    アクティブになっているときの checkbox コントロールにスタイルを適用します。checkbox がアクティブになるのは、ユーザーがコントロールを押してから離すまでの間です。ユーザーがコントロールを押し、ドラッグしたままポインターを checkbox の外に持っていった場合でも、コントロールはユーザーがポインターを離すまでアクティブになった状態が続きます。

  • :focus
    フォーカスがあるときの checkbox コントロールにスタイルを適用します。 checkbox にフォーカスを設定するには、いくつかの方法があります。

  • :disabled
    無効になっているときの checkbox コントロールにスタイルを適用します。 checkbox を無効にするには、HTML に disabled 属性を追加するか、JavaScript で disabled プロパティを true に設定します。

(擬似クラスとその他のセレクターを結合するさまざまな方法について詳しくは、「CSS セレクターとは」をご覧ください。)

関連トピック

HTML 基本コントロールのサンプルに関するページ

クイック スタート: チェック ボックス コントロールの追加

チェック ボックス コントロールのガイドラインとチェック リスト