纯CSS3美化单选复选框打勾原来可以这样生成 – 爱CSS

关闭边栏(ESC)打开边栏(ESC)

html

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

<h1 style="text-align: center;">纯CSS美化单选/复选框</h1>

<li>

<label>

</label>

<label>

</label>

</div>

</li>

<li>

<label>

</label>

<label>

</label>

<label>

</label>

</div>

</li>

</ul>

css

.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;
}

.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;

}

效果如下：

文章页的另一种风格上下篇DIY显示特效

CSS 2017-02-05 1

如今这个文章页的效果跟之前的显示差不多，只是作了以下更改了：特色图为固定，文章内容…

苹果手机IOS设备对meta定义的私有属性

CSS 2017-02-12 1

以下几个meta属性，对于IOS设备是有效的，方便把网站保存在桌面，再从桌面打开的时候，就能实现…

复选框 | 自定义CSS美化后的复选框

CSS 2017-04-30 3

最近在为博客添加评论回复时发邮件，在发表评论时，可以由用户决定是否有回复时邮件通知，这个…

wordpress 评论有回复时发邮件通知

CSS 2017-04-30 8

之前本博客的评论有回复的时候，不会自动发送邮件给评论者，觉得不太好，所以决定也弄一个，于…

chrome浏览器不能自动播放视频的一些记录

CSS 2019-01-12 6

这些天在弄视频作为背景效果时，发现了这个问题，以往没做过这种效果，还是没知道部分浏览是不…

CSS中一些容易漏掉了知识点

CSS 2017-02-22 3

1.设置背景background-clip为text，能做出用背景填充字体 background:linear-gradient(top,#ee…

目录

html

css

效果如下：

山竹来了吗屋外风声吹响

用jquery实现当文字超过一定字数就显示省略号

文章页的另一种风格上下篇DIY显示特效

苹果手机IOS设备对meta定义的私有属性

复选框 | 自定义CSS美化后的复选框

wordpress 评论有回复时发邮件通知

chrome浏览器不能自动播放视频的一些记录

CSS中一些容易漏掉了知识点

发表评论取消回复

SQL Server 常用近百条SQL语句（收藏版）

SQL高效查询两个表不同的数据

五岁生日 | 这一年跟表姐一块庆祝生日，可心的一天了

跨域 | 百度联想词二种方式来实现

$.ajax({})方法success，error，complete，beforeSend

【童心致敬•礼赞祖国】红红中国心浓浓爱国情

目 录

html

css

效果如下：

山竹来了吗 屋外风声吹响

用jquery实现当文字超过一定字数就显示省略号

发表评论 取消回复

目录

山竹来了吗屋外风声吹响

发表评论取消回复