一款纯css3实现简单的checkbox复选框和radio单选框

　　昨天为大家分享了一款很炫的checkbox复选框和radio单选框，今天再给大家带来一款简单实用的checkbox复选框和radio单选框。界面清淅、舒服。先给大家来张效果图：

　　实现代码：

　　html代码：

XML/HTML Code复制内容到剪贴板

<divclass="frame">

<inputchecked="checked"id="radio_1"name="radio"type="radio">

<labelclass="radio"for="radio_1">

<iclass="fafa-times">

</label>

<inputid="radio_2"name="radio"type="radio">

<labelclass="radio"for="radio_2">

<iclass="fafa-times">

</label>

<inputid="radio_3"name="radio"type="radio">

<labelclass="radio"for="radio_3">

<iclass="fafa-times">

</label>

<inputid="radio_4"name="radio"type="radio">

<labelclass="radio"for="radio_4">

<iclass="fafa-times">

</label>

<inputid="radio_5"name="radio"type="radio">

<labelclass="radio"for="radio_5">

<iclass="fafa-times">

</label>

</div>

<divclass="frame">

<inputchecked="checked"id="check_1"name="check"type="checkbox">

<labelclass="check"for="check_1">

<iclass="fafa-check">

</label>

<inputid="check_2"name="check"type="checkbox">

<labelclass="check"for="check_2">

<iclass="fafa-check">

</label>

<inputid="check_3"name="check"type="checkbox">

<labelclass="check"for="check_3">

<iclass="fafa-check">

</label>

<inputid="check_4"name="check"type="checkbox">

<labelclass="check"for="check_4">

<iclass="fafa-check">

</label>

<inputid="check_5"name="check"type="checkbox">

<labelclass="check"for="check_5">

<iclass="fafa-check">

</label>

</div>

　　css3代码：

CSS Code复制内容到剪贴板

form

{

width:100vw;

height:100vh;

display:flex;

flex-flow:columnwrap;

justify-content:center;

align-items:center;

}

form.frame

{

display:flex;

flex-flow:rownowrap;

}

form.frameinput

{

display:none;

}

form.framelabel

{

cursor:pointer;

position:relative;

width:30px;

height:30px;

margin:10px;

background:#8ABA56;

transition:all0.3sease-in-out;

font-size:12pt;

color:#FFF;

-webkit-font-smoothing:antialiased;

}

form.framelabel.radio

{

border-radius:100%;

}

form.framelabel.check

{

border-radius:5px;

}

form.framelabel.fa

{

position:absolute;

top:0;

left:0;

rightright:0;

bottombottom:0;

opacity:0;

-webkit-transform:scale(0);

transition:all0.3sease-in-out;

line-height:30px;

text-align:center;

}

form.frameinput:checked+label

{

background:#678b40;

}

form.frameinput:checked+label.fa

{

opacity:1;

-webkit-transform:scale(1);

}

　　好了。复制上面的html代码和css代码。轻松搞定一款漂亮的checkbox、radio按钮，谢谢阅读，希望能帮到大家，请继续关注，我们会努力分享更多优秀的文章。

相关文章

最新文章

热门文章

猜你喜欢