CSSを使用してラジオとチェックボックスのスタイルをカスタマイズする例の詳細な説明

黄舟
リリース: 2017-05-26 13:21:53
オリジナル
2342 人が閲覧しました

ラジオとチェックボックスのカスタムスタイルを作成するとき、構造は常に次のとおりでした

<label>
    <span class="diyRadio">
        <input type="radio" name=" value="">
    </span>
    <span>文字</span>
</label>
ログイン後にコピー

そこで、diyRadioのスタイルを新しいRadioとして定義し、jsを使用して関連付けを作成しました。

今日、 タグの for 属性 + :checked を使用して純粋な CSS で実行できることを知りました
( それは本当に不適切です、やはり真剣に詳細に説明する必要があります) )

DIY の単一オプションの例は次のとおりです:

<!-- HTML -->
<p class="radio-beauty-container">
    <label>
        <span class="radio-name">radio1</span>
        <input type="radio" name="radioName" id="radioName1" hidden/>
        <label for="radioName1" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">radio2</span>
        <input type="radio" name="radioName" id="radioName2" hidden/>
        <label for="radioName2" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">radio3</span>
        <input type="radio" name="radioName" id="radioName3" hidden/>
        <label for="radioName3" class="radio-beauty"></label>
    </label>
</p>
ログイン後にコピー
/* CSS */
.radio-beauty-container {
  font-size: 0;
}
.radio-beauty-container .radio-beauty:hover, .radio-beauty-container input[type="radio"]:checked + .radio-beauty {
  padding: 2px;
  background-color: green;
  background-clip: content-box;
}
.radio-beauty-container .radio-name {
  vertical-align: middle;
  font-size: 16px;
}
.radio-beauty-container .radio-beauty {
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  display: inline-block;
  border: 1px solid green;
  vertical-align: middle;
  margin: 0 15px 0 3px;
  border-radius: 50%;
}
.radio-beauty-container .radio-beauty:hover {
  box-shadow: 0 0 7px green;
}
ログイン後にコピー


以上がCSSを使用してラジオとチェックボックスのスタイルをカスタマイズする例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート