戦闘へのWebフロントエンドエントリー：、デフォルトのスタイルのチェックボックス造園ラジオを変更する方法をまとめ

今、ますます豊かなフロントページの効果は、デフォルトの入力コンポーネントのスタイルは明らかに設計要件を満たすことができません。開発プロジェクト前にいくつかの時間はちょうどラジオ、チェックボックススタイルのアプローチでは、この特別に変更仕上げの関連する要求事項に触れます。

原理：一般的な原理は、天然またはチェックボックス入力タグ、その後方に配置された関連付けられたラベル要素を使用することです。透明である、<入力>要素に、および選択された、即ち、後のラベルのスタイルを設定し、ユーザの操作を決定するために、CSSネイティブプロパティを使用して、<ラベル>要素を参照するためにユーザを配置することにより、入力[タイプ=チェックボックス]：確認+ラベル{}

CSS3は擬似要素のスタイルの変更を使用して達成しました

htmlコード

web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）
   <p>您的性别：</p>
    <div class="radio-sex">
        <input type="radio" id="sex1" name="sex">
        <label for="sex1"></label>
        <span>男</span>
    </div>
    <div class="radio-sex">
        <input type="radio" id="sex2" name="sex">
        <label for="sex2"></label> 女
    </div>

CSSスタイル

.radio-sex {
    position: relative;
    display: inline-block;
    margin-right: 12px;
}

.radio-sex input {
    vertical-align: middle;
    margin-top: -2px;
    margin-bottom: 1px;
    /* 前面三行代码是为了让radio单选按钮与文字对齐 */
    width: 20px;
    height: 20px;
    appearance: none;/*清楚默认样式*/
    -webkit-appearance: none;
    opacity: 0;
    outline: none;
    /* 注意不能设置为display:none*/
}

.radio-sex label {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    /*注意层级关系，如果不把label层级设为最低，会遮挡住input而不能单选*/
    width: 20px;
    height: 20px;
    border: 1px solid #3582E9;
    border-radius: 100%;
}

.radio-sex input:checked+label {
    background: #3582E9;
}

.radio-sex input:checked+label::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 2px;
    width: 5px;
    height: 12px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transform: rotate(45deg);
}

長所：JSや写真を使用せずにCSS3の利点をフルに活用、あなただけの純粋なCSS3を得ることができます

短所：貧しいの互換性は、唯一のIE9 +をサポートしています

ケース：

戦闘へのWebフロントエンドエントリー：、デフォルトのスタイルのチェックボックス造園ラジオを変更する方法をまとめ

スタイルの変更を達成するために写真を使用して、

アイデアの実現
1.入力属性隠された皮の入力を設定します。

<input type="radio" name="type" id="adviceRadio1" value="1" checked hidden/>

IDバインド入力によるラベルのラベル2.ので、あなたはそのラベルをクリックすると実際に入力をクリック

<input type="radio" name="type" id="adviceRadio1" value="1" checked hidden/>
                <label for="adviceRadio1" class="advice"></label>

背景画像の状態を設定し、ラベルのスタイルを定義します。3.選択されていません

web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）

.advice{
                    height: 12px;
                    width: 12px;
                    display: inline-block;
                    background-image: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-unchecked.png');
                    background-repeat: no-repeat;
                    background-position: center;
                    vertical-align: middle;
                    margin-top: -4px;
                }

4.スタイル選択は、選択された状態のラベルに隣接して配置され

input[type="radio"]:checked + .advice{
                    background-image: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-checked.png');
                }

これらは、無線実装コードラジオボタンであり、チェックボックスはまた、缶のチェックボックスのように定義された入力タイプに類似しています

実装におけるプラグインの使用

素晴らしい-ブートストラップのチェックボックス插件

素晴らしい - ブートストラップ・チェックボックスは、ブートストラップのチェックボックスとラジオボタンのプラグインを美しくあります。それは、何のJavaScriptファイルを純粋なCSSを使用していない書かれています。それは美しい美容効果を完了するために、上のネイティブブートストラップ成分に基づいていくつかの小さな変更を行うことです。

プラグインのダウンロード：https://www.bootcdn.cn/awesom ...
注：素晴らしい-ブートストラップ・checkbox.cssを導入する必要性、font- awesome.css 対応するフォントとフォント素晴らしいフォントファイル

戦闘へのWebフロントエンドエントリー：、デフォルトのスタイルのチェックボックス造園ラジオを変更する方法をまとめ

pretty.css

pretty.cssは効果を美化純粋なCSS3美しいチェックボックスとラジオです。pretty.cssは、チェックボックスとラジオネイティブ造園のために組み合わせるフォントやアイコンの様々なを使用することができ、ボタンがクリックされたとき、あなたはまた、アニメーション化することができます。

プラグインのダウンロード：https://www.bootcdn.cn/pretty ...

戦闘へのWebフロントエンドエントリー：、デフォルトのスタイルのチェックボックス造園ラジオを変更する方法をまとめ

私たちはメッセージを歓迎するためのより良い方法を議論する場合の方法は、まず、ここで紹介知っています。