入力の単一選択と複数選択のスタイルを変更するCSSの詳細解説

プロジェクト開発では、入力の単一選択と複数選択のスタイルを変更する必要がある状況によく遭遇します。今日は、入力の単一選択と複数選択のスタイルを変更する簡単な方法を紹介します。

その前に簡単に紹介しましょう:擬似クラスの前

:beforeセレクターは選択された要素の前にコンテンツを挿入します。 content attribute を使用して、挿入するコンテンツを指定します (content は必須です)。

これは理解するのが難しいことではないと思います。最初にアイデアを理解しましょう:

(1) まず、label を使用して HTML の input 要素のマークを定義します。つまり、ラベル label をクリックすると、対応する input が表示されます。も選択またはキャンセルされます

(2) 次のステップは、入力を非表示にし、ラベルの前にスタイルを追加することです。以下の例は、自分で描いた円です。もちろん背景画像に置き換えることも可能です。

input[type="radio"]+label:before是未选中状态的样式

input[type="radio"]:checked+label:before是选中状态的样式

<input type="radio" id="nationality1"><label for="nationality1">中国</label></p>

input[type="radio"]{
    display:none;
}
input[type="radio"]+label{
    position: relative;
}
input[type="radio"]+label:before{
    content: "";
    width:25px;
    height:25px;
    background: #ffffff;
    border:2px solid $gray;
    position: absolute;
    bottom:3px;
    left: -35px;
    border-radius: 50%;
}                                                   
input[type="radio"]:checked+label:before{
    content: "";
    width: 25px;
    height: 25px;
    background: #34c0f5;
    position: absolute;
    bottom:3px;
    left: -35px;
    z-index: 99;
    border-radius: 50%;
}

複数の選択を行うには、ラジオをチェックボックスに置き換えます。

注: 非表示と疑似クラスの配置が重要です

以上が入力の単一選択と複数選択のスタイルを変更するCSSの詳細解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。