ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSでラジオボタンのスタイルをカスタマイズするにはどうすればよいですか? (コード)

CSSでラジオボタンのスタイルをカスタマイズするにはどうすればよいですか? (コード)

不言
リリース: 2018-08-21 14:57:42
オリジナル
5049 人が閲覧しました

この記事の内容はCSSでラジオボタンのスタイルをカスタマイズする方法についてです。 (コードの実装) は参考になると思います。

htmlパート

<div>
    <label>
        <input>
        <span>
            <span>
                <span></span>
            </span>
        </span>
        <span>LOVE</span>
    </label>
    <label>
        <input>
        <span>
            <span>
                <span></span>
            </span>
        </span>
        <span>YOU ARE NICE</span>
    </label>
</div>
ログイン後にコピー

cssスタイルパート

            .radio {
                width: 260px;
                height: 26px;
                line-height: 26px;
                margin: 200px auto;
                background-color: #ddeef1;
                font-size: 16px;
                color: #495060;
                text-align: center;
            }        
            label:first-child {
                margin-right: 40px;
            }
            label input, .radio_on {
              display: none;
            }            
            .pos {
                display: inline;
                vertical-align: middle;
            }        
            .radio_bg {
              position: relative;
              display: inline-block;
              height: 14px;
              width: 14px;
              border: 1px solid #B3B4B8;
              border-radius: 50%;
            }        
            label:hover .radio_bg, label input:checked + span.pos span.radio_bg {
              border: 1px solid #27B28B;
            }        
            label input:checked + span.pos span.radio_bg .radio_on {
              display: inline-block;
              position: absolute;
              top: 2px;
              left: 2px;
              width: 10px;
              height: 10px;
              border-radius: 50%;
              background-color: #27B28B;
            }
ログイン後にコピー

レンダリング

CSSでラジオボタンのスタイルをカスタマイズするにはどうすればよいですか? (コード)

関連する推奨事項:

HTMLのチェックボックスとラジオスタイルを美しくする方法

CSSを使用するラジオとチェックボックスのスタイルを定義する詳細な例

以上がCSSでラジオボタンのスタイルをカスタマイズするにはどうすればよいですか? (コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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