说明:作为一个Java后端程序员,有时候也需要自己去写些前端代码,所以将工作中用到的一些小知识做记录分享。
1.自定义单选框(有图片)
* ①先看效果图:
* ②再献上完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>radio and checkbox_1</title>
<style>
.outBorder{
top: 100px;
width: 800px;
height: 400px;
margin: 0 auto;
background: #ace0ea;
}
.title{
font-size: 18px;
}
/*单选框CSS*/
.radioCheck{
width: 470px;
height:90px;
margin: 0 auto;
}
.radioCheck label {
margin-left: 50px;
margin-right: 50px;
}
.radioCheck label font{
font-size: 16px;
line-height: 47px;
padding-left: 4px;
}
input[type="radio"]{
appearance: none;
-webkit-appearance: none;
outline: none;
display:none;
}
label{
display:inline-block;
cursor:pointer;
}
label input[type="radio"] + span{
float: left;
width:35px;
height:39px;
display:inline-block;
background:url(images/videoInterview/radio_box.png) no-repeat;
background-position:-35px 0;
}
label input[type="radio"]:checked + span{
background-position:0 0;
}
/*多选框CSS*/
.checkboxCheck{
width: 470px;
height:90px;
margin: 0 auto;
}
.checkboxCheck label{
margin-left: 50px;
}
.checkboxCheck label font{
font-size: 16px;
line-height: 47px;
padding-left: 4px;
}
input[type="checkbox"]{
appearance: none;
-webkit-appearance: none;
outline: none;
display:none;
}
label{
display:inline-block;
cursor:pointer;
}
label input[type="checkbox"] + span{
float: left;
width:35px;
height:39px;
display:inline-block;
background:url(images/videoInterview/radio_box.png) no-repeat;
background-position:-35px 0;
}
label input[type="checkbox"]:checked + span{
background-position:0 0;
}
</style>
</head>
<body>
<div class="outBorder" >
<div class="radioCheck">
<div class="title">单选框:</div>
<label><input type="radio" name="role" value="1"><span></span><font>面试官</font></label>
<label><input type="radio" name="role" value="2"><span></span><font>应聘者</font></label>
</div>
<div class="checkboxCheck">
<div class="title">多选框:</div>
<label><input type="checkbox" name="college " value="1"><span></span><font>文科</font></label>
<label><input type="checkbox" name="college " value="2"><span></span><font>理科</font></label>
<label><input type="checkbox" name="college " value="3"><span></span><font>哲学</font></label>
</div>
</div>
</body>
</html>
* ③最后稍微做下注解说明:
i 、这是我用到的点击图片(ps我也是会一点点的 *-*)
ii、起主要作用的是下面三行代码:
background:url(images/videoInterview/radio_box.png) no-repeat; //将图片作为背景 no-repeat表示不重复
background-position:-35px 0; //图片的一半为35px,负数表示向右移动35px,初始显示没勾的框
background-position:0 0; //点击显示有勾的框
不明白的可以复制上面完整代码自己尝试一下,相信聪明的你们一试就会!
1.自定义单选框(无图纯文字)
* ①先看效果图:
* ②再献上完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>radio and checkbox_2</title>
<style>
.outBorder{
top: 100px;
width: 800px;
height: 400px;
margin: 0 auto;
background: #ace0ea;
}
.title{
font-size: 18px;
}
/*单选框CSS*/
.radioCheck{
width: 470px;
height:90px;
margin: 0 auto;
}
.radioCheck label {
margin-left: 50px;
margin-right: 50px;
}
.radioCheck label font{
line-height: 47px;
padding-left: 4px;
}
input[type="radio"]{
appearance: none;
-webkit-appearance: none;
outline: none;
display:none;
}
label{
display:inline-block;
cursor:pointer;
}
label input[type="radio"] + span{
padding: 10px;
font-size: 20px;
font-weight: 500;
cursor: pointer;
}
label input[type="radio"]:checked + span{
color:#0797b5;
font-size: 26px;
}
label input[type="radio"]:hover + span{
color:#0797b5;
}
/*多选框CSS*/
.checkboxCheck{
width: 470px;
height:90px;
margin: 0 auto;
}
.checkboxCheck label{
margin-left: 50px;
}
.checkboxCheck label font{
line-height: 47px;
padding-left: 4px;
}
input[type="checkbox"]{
appearance: none;
-webkit-appearance: none;
outline: none;
display:none;
}
label{
display:inline-block;
cursor:pointer;
}
label input[type="checkbox"] + span{
padding: 10px;
font-size: 20px;
font-weight: 500;
cursor: pointer;
}
label input[type="checkbox"]:checked + span{
color:#0797b5;
font-size: 26px;
}
label input[type="checkbox"]:hover + span{
color:#0797b5;
}
</style>
</head>
<body>
<div class="outBorder" >
<div class="radioCheck">
<div class="title">单选框:</div>
<label><input type="radio" name="role2" value="1"><span><font>面试官</font></span></label>
<label><input type="radio" name="role2" value="2"><span><font>应聘者</font></span></label>
</div>
<div class="checkboxCheck">
<div class="title">多选框:</div>
<label><input type="checkbox" name="college2" value="1"><span><font>文科</font></span></label>
<label><input type="checkbox" name="college2" value="2"><span><font>理科</font></span></label>
<label><input type="checkbox" name="college2" value="3"><span><font>哲学</font></span></label>
</div>
</div>
</body>
</html>
* ③最后稍微做下注解说明:
原理和有图的基本类似,不明白的可以复制代码,直接运行浏览器调试一下即可!