--- ---復元コンテンツ始まります
多くの場合、スタイルのラジオボタンやチェックボックスが付属していますブラウザが美しいではない、とブラウザ間のスタイルの違いを持ちます。当社の生産は需要不足となっています。ここでは、CSSでスタイルのラジオボタンやチェックボックスを変更するカスタマイズ。
まず、効果の例を見て：
図は、私の側のレンダリングの一例であり、参照することにより、最後に取り付けられたコード全体を配置します。
- ボックスカスタムスタイル
私たちが最も頻繁に発生したチェックボックスの問題は、鳩スタイルの多様性、あるいはさまざまな色です。
ここでの論理的なアプローチは、カスタムボックスのスタイルです：ケースの入力には、スタイルとスタイルを再定義し、チェックボックスオリジナルのスタイルをオフに選択され、チェックマークが絵を埋めるために使用することができます。
[HTML]ボックス、次のように：
123 </ラベル>の<input type = "チェックボックス" ID = "CheckBox1を"> <= "CheckBox1を"のラベル> <= "checkbox2"のラベル>の<input type = "チェックボックス" ID = "checkbox2"> 23 </ラベル>
次のようなスタイル上のボックスは、次のとおりです。
入力[タイプ=「チェックボックス」] {
幅：20ピクセル。
高さ：20ピクセル;
背景色：#FFF;
-webkit-外観：なし。
国境：1pxの固体＃1 c9c9c9。
国境半径：2ピクセル。
概要：なし。
}
入力[タイプ= "チェックボックス"]：チェック{
背景：URLを（「https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=5bc58607708b4710da22f59ea2a7a898/622762d0f703918f418843ec533d269759eec4bf.jpg 「）
ノー・リピートセンター;
背景サイズ：100％100％。
}
デフォルトのスタイルの後なしクリアスタイルを変更：本明細書で使用されるセレクタは、チェックボックス、外観を選択し属性。チェックボックスが画像の塗りつぶしを使用してチェックされます。
- シングルボックスのカスタムスタイル
シングルボックスのカスタム・ロジック：擬似要素シミュレーション]チェックボックススタイルを使用してクリアし、デフォルトのスタイルのラジオ。
次のように男女のHTMLの例としては、読み取ります。
<P>您的性别ます：</ p>
<divのクラス= "ラジオセックス">
の<input type = "ラジオ" ID = "sex1"名前= "セックス">
<= "sex1"のラベル> </ラベル>
<span>の男</ span>を
</ div>
<divのクラス= "ラジオセックス">
の<input type = "ラジオ" ID = "sex2"名前= "性別">
= "sex2"のための<label> < /ラベル>女
</ div>
CSSは次のよう：
性別{-.radio
位置：相対;
表示：インラインブロック;
マージン右：12ピクセル;
}
.radio INPUT {性別
左の縦-ALIGN =ミドル;
/ *コードの三行の前のラジオボタンラジオテキストの配置を行います* /
幅：20ピクセル;
高さ：20ピクセル;
外観：なし; / *クリアデフォルトのスタイル* /
-webkit-外観：なし;
不透明度：0;
概要：なし;
/ *ノートがディスプレイとして設定することはできません：なし* /
}
.radioラベル{-sex
位置：絶対;
左：0;
トップ：0;
Zインデックス:. 1;
/ *注階層、ラベルが最も低いレベルに設定されていないが、無線入力/ *ブロックしない場合は
幅：20ピクセル;
高さ：20ピクセル;
ボーダー：1ピクセル固体＃3582e9;
ボーダーRADIUS：100％。
}
.radio同性入力[タイプ= "ラジオ"]：+ラベルをチェック{
背景：＃3582e9。
}
.radio同性入力[タイプ=「ラジオ」]：+ラベルを確認:: {後に
コンテンツ：「」。
位置：絶対;
左：7px;
トップ：2ピクセル。
幅：5pxの;
高さ：12ピクセル;
ボーダー右：1pxの固体#FFF;
border-bottom：1pxの固体#FFF;
変換：回転（45deg）。
}
.radio同性スパン{
垂直整列：中央;
}
隣接兄弟セレクタと疑似要素が完了すると、セレクタをチェックし,:スタイル属性セレクタを使用する]ラジオボタンを選択します。選択された場合、45度回転させることによって達成右の境界と下境界効果を提供することによって、チェックマーク。
同じの例の上に他のワンボックスのスタイルや色と数字。
アリを導入することで、チェックマークの右下隅の中に小さな数字の例としては、ベクターのアイコンの中の私のライブラリです。
参考のために以下のコード全体を貼り付けます。
<テンプレート>
<DIV CLASS = "メイン">
<DIV CLASS = "DIV"> 123 </ div>
123 </ラベル>の<input type = "チェックボックス" ID = "CheckBox1を"> <= "CheckBox1を"のラベル>
23 </ラベル>の<input type = "チェックボックス" ID = "checkbox2"> <= "checkbox2"のラベル>
</ P> <P>您的性别
<DIV CLASS = "無線性別">
の<input type = "ラジオ" ID = "sex1"名前= "性別">
= "sex1">のための<ラベル</ label>は
<span>の男</ span>を
</ div>
<divのクラス= "ラジオセックス">
<入力タイプ=」ラジオ」ID = "sex2"名前= "セックス">
<ラベル= "sex2"> </ label>は女
</ div>
<P>喜欢的颜色ます：</ p>
<divのクラスには、= "ラジオラベル" >
の<input type = "ラジオ" ID = "カラー1" NAME = "色">
<= "カラー1"のラベル>蓝色</ label>は
</ div>
<DIV CLASS = "ラジオラベル">
の<input type = "ラジオ" ID = "カラー2" NAME = "色">
=用<ラベル"カラー2">红色22 </ label>は
</ div>
<DIV CLASS = "ラジオラベル">
の<input type = "ラジオ" ID = "カラー3" NAME = "色">
= "カラー3"の<ラベル>绿色333 </ label>は
</ div>
<スパンクラス= "iconfont"スタイル= "色：赤"></ span>の
<P>喜欢的数字ます：</ p>
<divのクラス= "ラジオ・チェック" >
の<input type =」ラジオ」ID = "NUM1"名前= "NUM"：チェックする= "NUM == 'NUM1' numが= 'NUM1'" @ =をクリックして"">
<=のラベル"NUM1">一1 </ label>は
<スパンクラス= "iconfont iconq"></ span>を
</ div>
<DIV CLASS = "ラジオ・チェック">
<スタイルのlang = "SCSSは、"スコープ>
<input type = "ラジオ" ID = "num2の"名前= "NUM"：チェックする= "NUM == 'からnum2'" @クリック= "NUM = 'からnum2'">
二222222 <= "NUM2"のラベル> < /ラベル>
<スパンクラス= "iconfont iconq"></ span>を
</ div>
<divの@ =]をクリックし、 "書き込み（）">点我输出你喜欢的数字：{{NUM}} </ DIV>
< / DIV>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
名：「入力コンポーネントの、
データ（）{
リターン{
NUM 'NUM1'
}
}、
メソッド：{
WRITE（）{
にconsole.log（ここ。NUM）
}
}
}
</スクリプト>
@フォントフェース{
フォントファミリ：「iconfont」; / *プロジェクトID 1313406 * /
SRC：URL（ '// at.alicdn.com/t/font_1313406_8rrf66s2gx.eot'）;
SRC：URL（ '// at.alicdn.com/t/font_1313406_8rrf66s2gx.eot?#iefix'）フォーマット（ '組み込みのOpenType'）、
URL（ '// at.alicdn.com/t/font_1313406_8rrf66s2gx.woff2'）フォーマット（ 'woff2'）、
URL（ '// at.alicdn.com/t/font_1313406_8rrf66s2gx.woff'）フォーマット（ 'WOFF'）、
URL（ '// at.alicdn.com/t/font_1313406_8rrf66s2gx.ttf'）フォーマット（ 'TrueTypeの'）、
URL（ '// at.alicdn.com/t/font_1313406_8rrf66s2gx.svg#iconfont'）フォーマット（ 'SVG'）;
}
.main {
パディング：20ピクセル。
}
.iconfont {
フォントファミリ： "iconfont"！重要;
フォントサイズ：16pxに;
フォントスタイル：ノーマル;
-webkit-フォントスムージング：アンチエイリアス。
-moz-OSX-フォントスムージング：グレースケール。
}
、P {
マージン：15ピクセル0。
}
.div：前{
内容：URL（http://www.w3school.com.cn/i/w3school_logo_white.gif）。
}
入力[タイプ=「チェックボックス」] {
幅：20ピクセル。
高さ：20ピクセル;
背景色：#FFF;
-webkit-外観：なし。
国境：1pxの固体＃1 c9c9c9。
国境半径：2ピクセル。
概要：なし。
}
入力[タイプ= "チェックボックス"]：チェック{
背景：URLを（「https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=5bc58607708b4710da22f59ea2a7a898/622762d0f703918f418843ec533d269759eec4bf.jpg 「）
なしリピート中心;
背景サイズ：100％100％。
}
.radio同性{
位置：相対。
表示：インラインブロック。
マージン右：12ピクセル;
}
.radio性別INPUT {
左の縦-ALIGN =ミドル;
/ *コードの三行の前のラジオボタンラジオテキストの配置を作る* /
幅20ピクセル、
高さ：20ピクセル;
外観：なし; / *クリア*のデフォルトのスタイル/
-外観のWebKit：なし;
不透明度：0;
概要：なし;
/ *注ディスプレイとして設定することができない：なし* /
}
.radio同性ラベル{
位置：絶対;
左：0;
トップ：0;
Zインデックス:. 1。
ラベルは最低レベルに設定されていない場合/ *注階層は、それが入力されたラジオをブロックしない* /
}
幅：20ピクセル;
高さ：20ピクセル;
国境：1pxの固体＃3582e9。
境界半径：100％。
}
.radio同性入力[タイプ= "ラジオ"]：チェック+ラベル{
背景：＃3582e9。
.radio同性入力[タイプ=「ラジオ」]：+ラベルを確認:: {後に
コンテンツ：「」。
位置：絶対;
左：7px;
トップ：2ピクセル。
幅：5pxの;
高さ：12ピクセル;
ボーダー右：1pxの固体#FFF;
border-bottom：1pxの固体#FFF;
変換：回転（45deg）。
}
.radio同性スパン{
垂直整列：中央;
}
/ *喜欢的颜色* /
.radioラベル、
.radioチェック{
表示：インラインブロック。
位置：相対;
}
.radioラベル入力[タイプ=「ラジオ」] {
外観：なし。/ *清楚默认样式* /
-webkit-外観：なし。
/ *不透明度：0; * /
概要：なし。
位置：絶対;
z屈折率：2。
幅：計6Px。
高さ：計6Px。
トップ：10pxの;
左：10pxの;
境界半径：50％。
背景：＃1 b4b4b4;
}
.radioラベルラベル{
表示：インラインブロック。
最小幅：は50px;
高さ：は24px;
行の高さ：は24px;
テキスト整列：センター;
パディング右：10pxの;
国境半径：5pxの;
パディング左：25ピクセル;
色：#FFF;
背景色：＃c9c9c9。
}
.radioラベル入力[タイプ= "ラジオ"]：チェック{
不透明度：0。
}
.radioラベル入力[タイプ= "ラジオ"]：+ラベル{チェック
#FFF;：色
背景色：＃3597デシベル。
}
.radioラベル入力[タイプ=「ラジオ」]：+ラベルを確認:: {後に
コンテンツ：「」。
位置：絶対;
左：12ピクセル;
トップ：5pxの;
幅：5pxの;
高さ：12ピクセル;
ボーダー右：1pxの固体#FFF;
border-bottom：1pxの固体#FFF;
変換：回転（45deg）。
}
.iconq {
フォントサイズ：25ピクセル。
位置：絶対;
右：-11px;
下：-11px;
Zインデックス：1。
不透明度：0;
}
/ *喜欢的数字* /
.radioチェック入力[タイプ= "ラジオ"] {
/ *不透明度：0; * /
概要：なし。
位置：絶対;
Zインデックス：2。
外観：なし。
-webkit-外観：なし。
幅：100％;
高さ：100％;
トップ：0;
左：0;
境界半径：50％。
背景：＃1 b4b4b4;
}
.radioチェック入力[タイプ= "ラジオ"] {
不透明度：0。
}
.radioチェックラベル{
表示：インラインブロック。
/ *分幅：は50px; * /
高さ：は24px;
行の高さ：は24px;
テキスト整列：センター;
パディング右：10pxの;
国境：1pxの固体＃1 c9c9c9。
国境半径：5pxの;
パディング左：10pxの;
カーソル：ポインタ;
}
.radioチェック入力[タイプ=「ラジオ」]：チェック+ラベル+スパン{
色：＃3597デシベル。
不透明度：1;
}
+ラベル{チェック：入力[タイプ=「ラジオ」] .radioチェック
;＃3597デシベル：ボーダーの色を
}
.radioチェック入力[タイプ=「ラジオ」]：ホバー+ラベル{
ボーダーカラー：＃3597デシベル。
}
</スタイル>
もちろん、他の方法があり、動的バインディングクラスを通じてラジオボタン選択したスタイルをシミュレートすることができます。
テストに上記のコードが成功し、メッセージを残すことを歓迎します。