木头人的gravatar头像
木头人 2017-12-24 12:34:34

css3和图片分别实现checkbox单选和多选效果

1.css3实现模拟checkbox效果

<style>
.checkbox {
    position: relative;
    height: 30px;
}
.checkbox input[type='checkbox'] {
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    opacity: 0;
}
.checkbox label {
    position: absolute;
    left: 30px;
    top: 0;
    height: 20px;
    line-height: 20px;
}
.checkbox label:before {
    content: '';
    position: absolute;
    left: -30px;
    top: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    border-radius: 50%;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
}

.checkbox label:after {
    content: '';
    position: absolute;
    left: -22px;
    top: 3px;
    width: 6px;
    height: 12px;
    border: 0;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    background: #fff;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
}

.checkbox input[type='checkbox']:checked + label:before {
    background: #4cd764;
    border-color: #4cd764;
}
.checkbox input[type='checkbox']:checked + label:after {
    background: #4cd764;
}
</style>

在使用的时候使用下面的html代码

<div class='checkbox'>
    <input type='checkbox' id='checkbox1' name='checkboox[]'>
    <label for='checkbox1'>篮球</label>
</div>
<div class='checkbox'>
    <input type='checkbox' id='checkbox2' name='checkboox[]'>
    <label for='checkbox2'>乒乓球</label>
</div>
<div class='checkbox'>
    <input type='checkbox' id='checkbox3' name='checkboox[]' checked>
    <label for='checkbox3'>足球</label>
</div>

2.图片实现

扩展jquery插件

(function($){
	$.extend({
		inputStyle:function(){
			function check(el,cl){
				$(el).each(function(){
					$(this).parent('i').removeClass(cl);

					var checked = $(this).prop('checked');
					if(checked){
						$(this).parent('i').addClass(cl);
					}
				})
			}	
			$('input[type="radio"]').on('click',function(){
				check('input[type="radio"]','radio_bg_check');
			})
			$('input[type="checkbox"]').on('click',function(){
				check('input[type="checkbox"]','checkbox_bg_check');
			})
		}
		
	})

})(jQuery)

//调用
$(function(){
	$.inputStyle();
})

css样式:

@charset 'utf-8';
*{
	padding: 0;
	margin-left: 0;
}
input[type='radio'],input[type='checkbox']{
	width: 20px;
	height: 20px;
	vertical-align:middle;
	opacity: 0;

}
.input_style{
	background: url(../img/green.png) no-repeat;
	width: 20px;
	height: 20px;
	display: inline-block;
}
.radio_bg{
	background-position: -118px 0 ;
}
.checkbox_bg{
	background-position: 0 0;
}
.radio_bg_check{
	background-position: -166px 0 ;
}
.checkbox_bg_check{
	background-position: -48px 0;
}

前端页面

form>
	<p>
		单选框
		<lable>
			<i class='input_style radio_bg'><input type="radio" name="hot" value="1"></i>
			a1
		</lable>
		<lable>
			<i class='input_style radio_bg'><input type="radio" name="hot" value="2"></i>
			a2
		</lable>
		<lable>
			<i class='input_style radio_bg'><input type="radio" name="hot" value="3"></i>
			a3
		</lable>
		<lable>
			<i class='input_style radio_bg'><input type="radio" name="hot" value="4"></i>
			a4
		</lable>
		<lable>
			<i class='input_style radio_bg'><input type="radio" name="hot" value="5"></i>
			a5
		</lable>
	</p>
	<p>
		复选框
		<lable>
			<i class='input_style checkbox_bg'><input type="checkbox" name="q" value="11"></i>
			b1
		</lable>
		<lable>
			<i class='input_style checkbox_bg'><input type="checkbox" name="w" value="22"></i>
			b2
		</lable>
		<lable>
			<i class='input_style checkbox_bg'><input type="checkbox" name="e" value="33"></i>
			b3
		</lable>
		<lable>
			<i class='input_style checkbox_bg'><input type="checkbox" name="r" value="44"></i>
			b4
		</lable>
	</p>

	<input type="submit" value="提交">
</form>

效果截图:

css3和图片分别实现checkbox单选和多选效果css3和图片分别实现checkbox单选和多选效果


打赏

文件名:form.zip,文件大小:38.639K 下载
  • /
      • /form
        • /form/.project
        • /form/chcekbox2.html
        • /form/checkbox.html
          • /form/css
            • /form/css/input.css
          • /form/img
            • /form/img/green.png
          • /form/js
            • /form/js/input.js
最代码最近下载分享源代码列表最近下载
huaua7676  LV30 2018年4月24日
ly292208586  LV8 2018年1月30日
最代码官方  LV167 2017年12月24日
最代码最近浏览分享源代码列表最近浏览
孙龙52  LV6 2023年7月12日
face2023  LV1 2023年7月3日
月光skr  LV3 2023年5月7日
HANCW  LV7 2022年12月11日
kingoneyang  LV13 2022年7月23日
灵依ziNing  LV7 2020年5月14日
wanglinddad  LV53 2020年4月23日
wo2184245  LV3 2019年9月23日
xiongting  LV6 2019年6月3日
金子sdsdsds 2019年4月9日
暂无贡献等级
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友