ボックス選択効果を実現する純粋な CSS

セレクターの紹介:

1. " ": たとえば、div p は、

要素の直後にあるすべての

要素を選択します。

2. :checked: たとえば、input:checked は、ラジオ ボタンとチェック ボックスのチェック状態を示します。

(学習ビデオ共有: css ビデオ チュートリアル)

実装コード:

<style type="text/css">
            .che-box {
            display:inline;
        }
        .che-box input{
            display: none;
        }
        .che-box label{
            display: inline-block;
            border: 1px solid #e1e1e1;
            border-radius: 4px;
            padding: 3px 5px;
        }
        .che-box input:checked + label{
            border-color: #088de8;
            background: #088de8;
            color: #fff;
        }
    </style>
 
 
<div class="che-box">
        <input type="checkbox" id="che1" />
        <label for="che1">
            标签1
        </label>
    </div>
    <div class="che-box">
        <input type="checkbox" id="che2" />
        <label for="che2">
            标签2
        </label>
    </div>

実装効果:

この状況は主に type="checkbox, radio" でカスタム選択スタイルを入力する場合に使用されます。実際の作業でもよく使用されます。皆様の参考になれば幸いです。

関連する推奨事項: CSS チュートリアル

以上がボックス選択効果を実現する純粋な CSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。