纯CSS美化单选/复选框

纯CSS美化单选/复选框

  • 单选框:
  • 复选框:






代码如下:

html:

<h1 style="text-align: center;">纯CSS美化单选/复选框</h1>
<ul class="ul_box">
    <li>
        <div>单选框:</div>
        <div class="label_box">
            <label>
                    <input type="radio" name="sex">
                    <div>男</div>
                </label>
            <label>
                    <input type="radio" name="sex">
                    <div>女</div>
                </label>
        </div>
    </li>
    <li>
        <div>复选框:</div>
        <div class="label_box">
            <label>
                    <input type="checkbox" name="hobby">
                    <div>旅游</div>
                </label>
            <label>
                    <input type="checkbox" name="hobby">
                    <div>爬山</div>
                </label>
            <label>
                    <input type="checkbox" name="hobby">
                    <div>游泳</div>
                </label>
        </div>
    </li>
</ul>


css代码:

<style>

.ul_box {
margin:0 auto;
padding:0;
list-style:none;
width:600px;
}
.ul_box>li {
padding:10px 10px 0 10px;
overflow:hidden;
border-bottom:#e5e5e5 solid 1px;
}
.ul_box>li:last-child {
border-bottom:none;
}
.ul_box>li>div {
float:left;
}
.ul_box>li>div:nth-child(1) {
width:100px;
}
.ul_box>li>div:nth-child(2) {
width:480px;
overflow:hidden;
}
.label_box>label {
display:block;
float:left;
margin:0 10px 10px 0;
position:relative;
overflow:hidden;
}
.label_box>label>input {
position:absolute;
top:0;
left:-20px;
}
.label_box>label>div {
width:100px;
text-align:center;
border:#dddddd solid 1px;
height:40px;
line-height:40px;
color:#666666;
user-select:none;
overflow:hidden;
position:relative;
}
.label_box>label>input:checked + div {
border:#d51917 solid 1px;
color:#d51917;
}
.label_box>label>input:checked + div:after {
content:'';
display:block;
width:20px;
height:20px;
background-color:#d51917;
transform:skewY(-45deg);
position:absolute;
bottom:-10px;
right:0;
z-index:1;
}
.label_box>label>input:checked + div:before {
content:'';
display:block;
width:3px;
height:8px;
border-right:#ffffff solid 2px;
border-bottom:#ffffff solid 2px;
transform:rotate(35deg);
position:absolute;
bottom:2px;
right:4px;
z-index:2;
}



</style>

纯CSS美化单选/复选框
版权声明:若无特殊注明,本文皆为《 傲世零零 》原创,转载请保留文章出处。
本文链接:纯CSS美化单选/复选框 http://www.wangjunjiang.com/?post=134
正文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

嘻嘻 大笑 可怜 吃惊 害羞 调皮 鄙视 示爱 大哭 开心 偷笑 嘘 奸笑 委屈 抱抱 愤怒 思考 日了狗

评论信息框

吃奶的力气提交吐槽中...