zoukankan      html  css  js  c++  java
  • 自定义checkbox样式

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>自定义input[type="checkbox"]</title>
    		<style type="text/css">
    		*{padding: 0px; margin: 0px;}
    			.mycheckbox {
    				position: relative;
    				top: 100px;
    				left: 100px;
    			}
    			.mycheckbox input[type="checkbox"] {
    				display: none;
    			}
    			.mycheckbox label {
    				display: inline-block;
    				 100px;
    				height: 100px;
    				background: black;
    			}
    			.mycheckbox input[type="checkbox"]:checked+label {
    				background: blue;
    			}
    			.mycheckbox input[type="checkbox"]:checked+label:before{
    				display: inline-block;
    				position: absolute;
    				top: 20px;
    				left: 14px;
    				content: "";
    				height: 30px;
    				 60px;
    				border-left: 8px solid #FFF;
    				border-bottom: 8px solid #FFF;
    				transform: rotate(-45deg);
    			}
    		</style>
    	</head>
    	<body>
    		<!--
    			这里要注意的是,label的for必须指定input[type="text"]的id属性,不然会没有效果
    			自定义radio跟自定义checkbox一样,最终是定义label的样式。这个全凭大家的想象来自定义样式;
    		-->
    		<div class="mycheckbox">
    			<input type="checkbox" id="checkbox11" />
    			<label for="checkbox11"></label>
    		</div>
    	</body>
    </html>
    

    还有一个要注意的就是label在input的下面,不然会出现点击了没效果最终样式如下图:

    选中

    未选中:

  • 相关阅读:
    第二次作业
    自我介绍
    《JavaScript高级程序设计》读书笔记
    三种清理浮动的方式
    简单的水平导航条
    CSS——关于列表和导航条菜单之垂直菜单制作
    css中关于超链接的部分学习心得
    dubbox分布式框架 和相关依赖
    IO操作
    POI动态生成Excel
  • 原文地址:https://www.cnblogs.com/guxingzhe/p/5344022.html
Copyright © 2011-2022 走看看