私はクロスブラウザと互換性のある純粋なCSSのカスタムチェックボックスとラジオボタンを作ろうとしています。画像の下に述べたように純粋なCSSのカスタムチェックボックスとラジオボタンを作成するには?
私は結果lookinga午前: - 私は、CSSベースのチェックボックス&ラジオボタンをしたIE7
私はクロスブラウザと互換性のある純粋なCSSのカスタムチェックボックスとラジオボタンを作ろうとしています。画像の下に述べたように純粋なCSSのカスタムチェックボックスとラジオボタンを作成するには?
私は結果lookinga午前: - 私は、CSSベースのチェックボックス&ラジオボタンをしたIE7
いいですが、ie7、ie8は動作しません。 –
IE7と8で動作しません。 –
http://www.thecssninja.com/css/custom-inputs-usingにある記事の著者でない限り-css私はあなたにアロラ氏と呼ぶべきものを知らない! –
これを試してみてください。
HTML
<div class="checkbox">
<label class="i-checks">
<input type="checkbox" value=""> <i></i> Option one
</label>
</div>
<div class="radio">
<label class="i-checks">
<input type="radio" checked="" value="option2" name="a"> <i></i> Option two checked
</label>
</div>
CSS
.i-checks {
padding-left: 20px;
cursor: pointer;
}
.i-checks input {
opacity: 0;
position: absolute;
margin-left: -20px;
}
.i-checks input:checked + i {
border-color: #23b7e5;
}
.i-checks input:checked + i:before {
left: 4px;
top: 4px;
width: 10px;
height: 10px;
background-color: #23b7e5;
}
.i-checks input:checked + span .active {
display: inherit;
}
.i-checks input[type="radio"] + i, .i-checks input[type="radio"] + i:before {
border-radius: 50%;
}
.i-checks input[disabled] + i, fieldset[disabled] .i-checks input + i {
border-color: #dee5e7;
}
.i-checks input[disabled] + i:before, fieldset[disabled] .i-checks input + i:before {
background-color: #dee5e7;
}
.i-checks > i {
width: 20px;
height: 20px;
line-height: 1;
border: 1px solid #cfdadd;
background-color: #fff;
margin-left: -20px;
margin-top: -2px;
display: inline-block;
vertical-align: middle;
margin-right: 4px;
position: relative;
}
.i-checks > i:before {
content: "";
position: absolute;
left: 10px;
top: 10px;
width: 0px;
height: 0px;
background-color: transparent;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.i-checks > span {
margin-left: -20px;
}
.i-checks > span .active {
display: none;
}
OR - このURLは次のとおりhttp://fronteed.com/iCheck/
私の知る限りでは、これが唯一のCSSを使用できません。しかし私は間違っている可能性があります! – Cthulhu