フォームの場合は、入力[タイプ=「ラジオ」]スタイルはいつもとてもフレンドリーではない、別のブラウザで混合しました。
ラジオボタンのカスタムスタイルで、私たちの前のスクリプトは、達成するために使用されてきたが、あなたは今、新たな擬似クラスを使用することができます。チェックボックスが達成します。
スタイルがラジオボタンを指示するために設定されている場合ではない多くのスタイルがラジオボタン上で動作することができますので、この擬似クラスは、実用的ではありません。しかし、チェックが状態に基づくことができるラジオボタンのタッチで設定されたスタイルに他の要素に組み合わせセレクタ。
多くの場合、統一されたフォーム要素のためかどうか、または優れたユーザーエクスペリエンスのために、私たちは一緒に使用される要素と入力[タイプ=「ラジオ」]標識することを選択します。<ラベル>要素は、ラジオボタンに関連付けられている場合、それはまた、トリガスイッチとして機能することができます。
アイデア：
図1は、<ラベル>要素の内容（擬似要素）を生成するために添加し、スタイルを設定するためのラジオボタンへのステータスに基づいてもよいです。
2.次に、非表示にするには、実際のラジオボタンを置きます。
3.最後に、生成されたコンテンツは、それを美化します。
ソリューション：
コードの単純な部分の構造1.
<DIV CLASS = "女">
の<input type = "ラジオ" ID = "女"名前= "性別" />
<= "女性"のラベル>女</ label>は
</ div>
<divのクラス= "男性">
の<input type ="ラジオ」ID = "男性"名前= "性別" />
<ラベル=のための"男性">男</ label>は
</ div>
ラジオボタンが化さとして2、擬似要素を生成するいくつかの擬似要素を追加し、スタイルを与えます：
入力[タイプ= "ラジオ"] + {前にラベル::
コンテンツ： "\のA0"。/ *不换行空格* /
表示：インラインブロック。
垂直整列：中央;
フォントサイズ：18px;
幅：1EM。
高さ：1EM。
マージン右：.4em。
境界半径：50％。
国境：1pxの固体＃01cd78。
テキストインデント：.15em。
行の高さ：1。
}
何それが今日です。
まだ目に見えるオリジナルのラジオボタンが、我々は、ラジオボタンの状態を確認与えるスタイルを追加します。
3.様々なスタイルを追加するには、ラジオボタンの状態を確認します。
入力[タイプ=「ラジオ」]：+ラベルを確認:: {前に、
背景色：＃01cd78。
背景クリップ：コンテンツボックス。
パディング：.2em。
}
何それが今日です。
隠さ4.次に、元のラジオボタン：
入力[タイプ=「ラジオ」] {
位置：絶対。
クリップ：RECT（0、0、0、0）;
}
何それが今日です。
それは完全にキューを削除するには、キーボードのTabキーでフォーカスを切り替えるように、そう;なし：ときあなたはディスプレイを使用する場合、オリジナルのラジオボタンを非表示にします。
したがって、このようにして、元のラジオボタンを隠し、剪断ゼロの大きさを可能にする、切断することができます。
ここでは、古い内容は次のとおりです。
その違いの最大の度合いを示すために、良い見て、最初のスタイルの数を定義するためには：
<フォームアクション= "">
<DIV CLASS = "セックス">
<DIV CLASS = "女">
<女性=のラベル"">女</ label>は
<入力タイプ= "ラジオ"名前= "性別" ID = "女性">
</ div>
<divのクラス= "男性">
<= "男性">男</ label>はラベル
の<input type = "ラジオ"名前= "性別" ID = "男性">
</ divの>
</ div>
</フォーム>
本体{マージン：0。}
入力{パディング：0。マージン：0; ボーダー：0; }
.female、.male {
位置：相対。
高さ：40ピクセル;
行の高さ：40ピクセル;
余白左：40ピクセル;
}
.sexラベル{
表示：ブロック;
高さ：40ピクセル;
幅：40ピクセル;
行の高さ：40ピクセル;
フォントサイズ：20ピクセル;
カーソル：ポインタ;
}
.sex入力{
z屈折率：3。
位置：絶対;
トップ：0;
下：0;
左：40ピクセル;
マージン：自動;
表示ブロック;
幅：30px;
高さ：30px;
カーソル：ポインタ;
}
各ブラウザを観察すると、あなたは非常に異なっています：
すなわち：
エッジ：
オペラ：
クロム：
Firefoxの：
Firefoxブラウザのために、さらに幅を設定し、高さはあまり依然として円または初期状態の何の効果、入力[タイプ=「ラジオ」]ではありません。他のブラウザのパフォーマンスは、同じ効果を達成するために、私たちが行う必要があり、矛盾している互換性の処理です。
アイデア：
1.入力[タイプ=「ラジオ」]隠された、不透明度：0;トップに配置された、我々はそれをクリックすると、元のイベントが正しく応答することができるようになります。
2.カスタム円、下層、元のシミュレーション同様。
3.元の背景色を変更するカスタム基礎となる要素で、JSを使用する選択された入力[タイプ=「ラジオ」]達成します。
コード：
<form action="">
<div class="sex">
<div class="female">
<label for="female">女</label>
<input type="radio" name="sex" id="female">
<span class="female-custom"></span> <!-- 同下面的 span 一样作为自定义的元素 -->
</div>
<div class="male">
<label for="male">男</label>
<input type="radio" name="sex" id="male">
<span class="male-custom"></span>
</div>
</div>
</form>
body { margin: 0; }
input { padding: 0; margin: 0; border: 0; }
.female, .male {
position: relative; /* 设置为相对定位，以便让子元素能绝对定位 */
height: 40px;
line-height: 40px;
margin-left: 40px;
}
.sex label {
display: block;
height: 40px;
width: 40px;
line-height: 40px;
font-size: 20px;
cursor: pointer;
}
.sex input {
z-index: 3;
position: absolute;
top: 0;
bottom: 0;
left: 40px;
margin: auto; /* 这里及以上的定位，可以让该元素竖直居中。(top: 0; bottom: 0;) */
opacity: 0;
display: block;
width: 30px;
height: 30px;
cursor: pointer;
}
.sex span {
position: absolute;
top: 0;
bottom: 0;
left: 40px;
margin: auto;
display: block;
width: 25px;
height: 25px;
border: 1px solid #000;
border-radius: 50%;
cursor: pointer;
}
.sex span.active {
background-color: #000;
}
$("#male").click( function () {
$(this).siblings("span").addClass("active");
$(this).parents("div").siblings("div").children("span").removeClass("active");
});
$("#female").click( function () {
$(this).siblings("span").addClass("active");
$(this).parents("div").siblings("div").children("span").removeClass("active");
});
这样处理后，在浏览器中展示效果全部一样了：
扩展：
1. 对于代码中出现的定位，对父元素使用 position: relative; 给子元素使用 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; 能实现让子元素相对于父元素居中(满足水平居中和竖直居中)显示。如果只是需要竖直居中，则不需要添加 right: 0; 和 left: 0; 的样式。
2. 有时当我们不容易确定子元素的高度时，可以这样设置：对父元素 position: relative; 对子元素 position: absolute; top: 10px; bottom: 10px; margin: auto; 这样一来，子元素的高度就是父元素的高度减去20px后的值了，同样，top 和 bottom 支持百分数，可扩展性更强。
优化更新：
需求：
1. 有时候我们需要内联的单选样式；
2. 选中的按钮内的小圆圈不需要占满整个外圈的大小。
思路：
1. 让每一个包裹选择的 div 左浮动；
2. 给父元素添加圆形的外边框，子元素设置一个稍小于父元素大小的背景。
代码：
<form action="">
<div class="fruit">
<div class="apple">
<label for="apple">苹果</label>
<input type="radio" name="fruit" id="apple">
<div class="user-defined">
<span class="circle"></span>
</div>
</div>
<div class="banana">
<label for="banana">香蕉</label>
<input type="radio" name="fruit" id="banana">
<div class="user-defined">
<span class="circle"></span>
</div>
</div>
<div class="orange">
<label for="orange">橘子</label>
<input type="radio" name="fruit" id="orange">
<div class="user-defined">
<span class="circle"></span>
</div>
</div>
</div>
</form>
* { box-sizing: border-box; }
body { padding: 50px; }
input { padding: 0; margin: 0; border: 0; }
.fruit:before { content: ""; display: table; }
.fruit:after { content: ""; display: table; clear: both; }
.fruit > div { position: relative; float: left; margin-right: 50px; width: 80px; height: 40px; line-height: 40px; }
.fruit > div:last-child { margin-right: 0; }
.fruit label { display: block; width: 50px; height: 40px; line-height: 40px; cursor: pointer; }
.fruit input { z-index: 3; display: block; opacity: 0; position: absolute; top: 0; bottom: 0; left: 50px; margin: auto; width: 30px; height: 30px; cursor: pointer; }
.fruit .user-defined { z-index: 2; position: absolute; top: 0; bottom: 0; left: 50px; margin: auto; width: 30px; height: 30px; border: 1px solid #000; border-radius: 50%; cursor: pointer; }
.fruit .user-defined span.circle { display: block; width: 24px; height: 24px; margin-top: 2px; margin-left: 2px; background-color: transparent; border-radius: 50%; }
.fruit .user-defined span.active { background-color: #000; }
$("input").click(function() {
$(this).siblings("div").children("span").addClass("active");
$(this).parents("div").siblings("div").find("span").removeClass("active");
});
效果显示如下：
优化更新： (2016年11月07日)
需求：
1. 有时候我们的选择只有两种，比如性别；
2. 这种选择希望能像手机系统设置里的切换一样。
思路：
1. 让每一个包裹选择的 div 左浮动；
2. 让当前子元素添加区别的背景。
预期结果：
代码：
<div class="sex">
<span class="warning fl">性别确定后将不可更改！</span>
<div class="select fr">
<div class="male fl">
<label for="male">
<input type="radio" name="sex" id="male" checked>男
</label>
<span class="btn active">男</span>
</div>
<div class="female fl">
<label for="female">
<input type="radio" name="sex" id="female">女
</label>
<span class="btn">女</span>
</div>
</div>
</div>
/*性别*/
.sex span.warning {
font-size: 1.4rem;
color: #ccc;
}
.sex .male,
.sex .female {
position: relative;
width: 4rem;
height: 3.9rem;
z-index: 1;
line-height: 3.9rem;
text-align: center;
}
.sex .male label,
.sex .female label {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 4rem;
height: 3.9rem;
z-index: 3;
opacity: 0;
margin: auto;
display: inline-block;
line-height: 3.9rem;
cursor: pointer;
}
.sex input {
display: inline-block;
vertical-align: middle;/*让默认的单选样式的圆圈和“男”“女”的文本没有高差，看起来在同一水平线*/
height: 2.8rem;
line-height: 2.8rem;
margin: 0; /*清除浏览器默认的外边距*/
}
.sex .male span.btn,
.sex .female span.btn {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 4rem;
height: 2.8rem;
z-index: 2;
margin: auto;
display: inline-block;
line-height: 2.6rem;
text-align: center;
border: .1rem solid #fe5454;
color: #fe5454;
}
.sex .male span {
border-top-左半径：.2rem。
ボーダー左下半径：.2rem。
}
.femaleスパン{.sex
ボーダー右上半径：.2remと、
border-bottom-右半径：.2rem。
}
.sex .male span.active、
.sex .female span.active {
背景色：＃fe5454。
色：#FFF;
}
あなたは機能を切り替え書くためのjQueryを使用している場合、それは、コードの簡単な数行です。
$（ "SELECTラベル。 "）をクリックします（関数（）{。
。）addClass（"アクティブ"$（この）.siblings（"スパン"）;
。$（この）.parent（）兄弟（" DIV"）。 （ "スパン"）を見つけるremoveClass（ "アクティブ"）;
}）;
最後に、ラジオの効果はありません不透明オリジナルのスタイルで作られた：0;非表示を：
ラジオオリジナルスタイルの不透明度：0;非表示：
