自定义多选按钮

很多时候设计师给的按钮样式不是默认样式,则需要我们自定义样式,多选按钮样式是不可以通过CSS修改边框,颜色和大小的,这里用设计师给的图片来代替

完成效果:

多选按钮样式

css样式:

<style>
		.checkbox {
			position: relative;
			display: inline-block;
			cursor: pointer;
			padding-left: 25px;
		}
		
		.checkbox input {
			position: relative;
			display: none;
		}
		
		.checkbox i {
			position: absolute;
			top: 0px;
			left: 0px;
			display: block;
			width: 18px;
			height: 18px;
			background: url('img/unselected.png')left top no-repeat;
			/*IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size*/
			background-size: cover;
			/*火狐浏览器*/
			-moz-background-size: cover;
			/*chrome和safari*/
			-webkit-background-size: cover;
			background-image: url('img/unselected.png');
		}
		
		.checkbox input:checked+i {
			background: url('img/selected.png')left top no-repeat;
			background-size: cover;
		}
	</style>

HTML代码:

<!--默认多选按钮样式-->
		<input type="checkbox" name="love" id="love" value="" />唱歌
		<input type="checkbox" name="love" id="love" value="" />跳舞
		<input type="checkbox" name="love" id="love" value="" />旅游<br />
		<!--自定义样式-->
		<label class="checkbox">
			<input type="checkbox"/><i></i>唱歌
		</label>
		<label class="checkbox">
			<input type="checkbox"/><i></i>跳舞
		</label>
		<label class="checkbox">
			<input type="checkbox"/><i></i>旅游
		</label>

 

发表评论

邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据