站长资源
全栈工程师站点

教你最简单的复选框和单选按钮美化方法

教你最简单的复选框和单选按钮美化方法 -1

默认的表单元素,各个浏览器展现的并不一样,不过一样的是都很丑陋,很多UI框架都帮我们美化了表单的样式也多是介于JS于css并用,那么只用css可以进行美化吗,当然可以!

我们知道在写单选和复选的时候通常文字部分我们会用label标签,因为这样指定id后只需要点击文字就同样可以选中按钮

那么我们就来利用这一特性来进行单选框和复选框的美化工作

首先我们写一段html代码

<h2>复选框:</h2>
<span class="check_box">
 <input type="checkbox" id="check_1">
 <label for="check_1"></label>
 <em>复选框1</em>
</span>
<h2>单选按钮:</h2>
<span class="radio_box">
 <input type="radio" id="radio_1" name="radio" checked="">
 <label for="radio_1"></label>
 <em>选项1</em>
</span>

通过上面的结构我们就可以知道,只需要对label进行操作,将其覆盖默认表单的样式

这里先拿复选框为例讲解,因为复选框里面会有一个选中的效果,里面有一个√号,顺便将一下√号用css怎么写

我们对其进行绝对定位

首先对外层的check_box相对定位

.check_box {
	display:inline-block;
	position:relative;
}

然后对label绝对定位

.check_box label {
	width:16px;
	height:16px;
	position:absolute;
	top:0;
	left:0;
	border:2px solid #cacaca;
	border-radius:50%;
	background:#fff;
	cursor:pointer;
}

得到如图所示:

教你最简单的复选框和单选按钮美化方法 -2

我们可以看到,已经把默认的复选框样式给覆盖了

我们再给其中间增加一个√号选中效果

所以要通过伪类来给label增加一个√号

.check_box label:after {
	content:'';
	width:8px;
	height:4px;
	position:absolute;
	top:4px;
	left:3px;
	border:2px solid #cacaca;
	border-top:none;
	border-right:none;
	opacity:0.4;
	transform:rotate(-45deg);
}

这个对号实现的思路大家通过代码能看的出来吗,可以理解为做了一个宽度为8px,高度为4px的盒子,然后给其设置边框,去掉上面和右边的边框,再对其进行旋转。这样就得到了我们想要的√号效果

到这里基本就已经完成了,下面我们就要对其点击之后增加具体效果了

css3中对input增加了:checked选择器

:checked 选择器匹配每个选中的输入元素(仅适用于单选按钮或复选框)

我们利用这一新增特性对选中后进行样式改变

.check_box input:checked + label {
	border:2px solid #f78642;
}
.check_box input:checked + label:after {
	opacity:1;
	border:2px solid #f78642;
	border-top:none;
	border-right:none;
}

再增加一些hover的效果

.check_box label:hover {
	border:2px solid #f78642;
}
.check_box label:hover:after {
	border:2px solid #f78642;
	border-top:none;
	border-right:none;
}

效果如图所示:

教你最简单的复选框和单选按钮美化方法 -3

好啦,单选按钮的美化操作比复选框还要简单些,我把完整代码贴出来,大家自己尝试一下哦

完整代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>教你最简单的复选框和单选按钮美化方法</title>
<style>
.con {
	width:1000px;
	margin:0 auto;
}
h2 {
	font-weight:normal;
	color:#f44336;
}
/*复选*/

.check_box {
	display:inline-block;
	position:relative;
}
.check_box label {
	width:16px;
	height:16px;
	position:absolute;
	top:0;
	left:0;
	border:2px solid #cacaca;
	border-radius:50%;
	background:#fff;
	cursor:pointer;
}
.check_box label:hover {
	border:2px solid #f78642;
}
.check_box label:after {
	content:'';
	width:8px;
	height:4px;
	position:absolute;
	top:4px;
	left:3px;
	border:2px solid #cacaca;
	border-top:none;
	border-right:none;
	opacity:0.4;
	transform:rotate(-45deg);
}
.check_box label:hover:after {
	border:2px solid #f78642;
	border-top:none;
	border-right:none;
}
.check_box input:checked + label {
	border:2px solid #f78642;
}
.check_box input:checked + label:after {
	opacity:1;
	border:2px solid #f78642;
	border-top:none;
	border-right:none;
}
.check_box em {
	margin:0 0 0 5px;
}
/*单选*/

    .radio_box {
	display:inline-block;
	position:relative;
}
.radio_box label {
	width:15px;
	height:15px;
	position:absolute;
	top:0;
	left:0;
	border:2px solid #ef4949;
	border-radius:50%;
	background:#fff;
	cursor:pointer;
}
.radio_box input:checked + label:after {
	content:'';
	width:9px;
	height:9px;
	position:absolute;
	top:3px;
	left:3px;
	background:#ef4949;
	border-radius:50%;
}
.check_box em {
	margin:0 0 0 5px;
}
</style>
</head>
<body>
<div class="con">
    <h2>复选框:</h2>
    <span class="check_box">
     <input type="checkbox" id="check_1">
     <label for="check_1"></label>
     <em>复选框1</em>
   </span>
    <span class="check_box">
     <input type="checkbox" id="check_2">
     <label for="check_2"></label>
     <em>复选框2</em>
   </span>
    <span class="check_box">
     <input type="checkbox" id="check_3">
     <label for="check_3"></label>
     <em>复选框3</em>
   </span>
    <span class="check_box">
     <input type="checkbox" id="check_4">
     <label for="check_4"></label>
     <em>复选框4</em>
   </span>      
    <br><br>
    <h2>单选按钮:</h2>
    <span class="radio_box">
     <input type="radio" id="radio_1" name="radio" checked="">
     <label for="radio_1"></label>
     <em>选项1</em>
   </span>
    <br><br>
    <span class="radio_box">
     <input type="radio" id="radio_2" name="radio">
     <label for="radio_2"></label>
     <em>选项2</em>
   </span>
    <br><br>
    <span class="radio_box">
     <input type="radio" id="radio_3" name="radio">
     <label for="radio_3"></label>
     <em>选项3</em>
   </span>
    <br><br>
    <span class="radio_box">
     <input type="radio" id="radio_4" name="radio">
     <label for="radio_4"></label>
     <em>选项4</em>
   </span>
</div>

</body>
</html>

下拉框的美化可以参考之前的文章:http://www.wangdahai.cn/6602.html

本文由站长资源原创首发,转载请注明出处


在线演示  
×

站长资源极速下载通道: 教你最简单的复选框和单选按钮美化方法

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » 教你最简单的复选框和单选按钮美化方法

评论 抢沙发

评论前必须登录!