ラジオボタンとチェックボックス効果の純粋な CSS 実装例

ラジオボタンとチェックボックス

ラジオボタンとチェックボックスの効果を実現するための純粋な CSS

ラジオをリセット

PC プロジェクトの開発では、ラジオボタンやチェックボックスコンポーネントがよく使用されます。ただし、ネイティブスタイルはデザイナーのデザインスタイルとあまり一致しないため、サードパーティのモジュールを参照して実装したり、JS などの他の方法でハッキングしたりすることがよくあります。これにより、コードの量が増えるだけでなく、非常に複雑になるため、ネイティブの input[radio] と input[checkbox] に依存する純粋な CSS 実装があります。主なコードは次のとおりです。

HTMLメインコード

<div class="reset-radio">
    <input チェック type="radio" id="age1" name="age">
    <span class="real-target"></span>
</div>

CSSコード、ここでは主に子ノードスパンを介して入力と連携します：チェックされた兄弟セレクターを使用してスタイルを変更します

.リセットラジオ{
    表示: インラインブロック;
    位置: 相対的;
    幅: 16px;
    高さ: 16px;
}

.reset-radio .real-target {
    zインデックス: 1;
    幅: 100%;
    高さ: 100%;
    位置: 絶対;
    表示: インラインブロック;
    背景: #ffffff;
    境界線: 1px 実線 #dadde0;
    境界線の半径: 100%;
    上: 0;
    左: 0;
    下部: 0;
}

.reset-radio 入力[type=radio] {
    カーソル: ポインタ;
    zインデックス: 2;
    幅: 16px;
    高さ: 16px;
    不透明度: 0;
    位置: 絶対;
    左: 0;
    上: 0;
    マージン: 0;
    右: 0;
    下部: 0;
}

.reset-radio 入力:チェック済み+スパン {
    境界線の色: #48b4ec;
}

.reset-radio 入力:チェック済み+span::before {
    コンテンツ： '';
    位置: 絶対;
    背景: #48b4ec;
    幅: 6px;
    高さ: 6px;
    上位: 50%;
    左: 50%;
    変換: translate(-50%, -50%);
    境界線の半径: 100%;
}

チェックボックスをリセット

reset-checkbox の原理は同じなので、詳細には触れません。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: MySQL カーソルの定義と使用法

>>: Promiseの紹介と基本的な使い方の簡単な分析