<!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;

				width: 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;

				width: 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的下面，不然会出现点击了没效果；最终样式如下图：

选中

未选中：

自定义checkbox样式的更多相关文章

  1. WPF 自定义CheckBox样式

    自定义CheckBox样式,mark一下,方便以后参考复用 设计介绍: 1.一般CheckBox模板太难看了,肯定要重写其中的模板 2.模板状态为未选中状态和选中状态,设置为默认未选中就好了. 默认状 ...

  2. Android之自定义checkbox样式

    大部分情况下,我们在UI中并不采用Android自带的checkbox复选框样式,这时候就需要我们自定义自己的checkbox. 首先找两张checkbox背景图片,比如下图样子的: 然后在drawa ...

  3. 自定义 checkbox 样式

    前言:最近在做一个网站,为了统一风格,需要自定义checkbox的样式.所以花了点时间参考了 研究了一下.感觉上面的方法略微麻烦.所以自己重新写了下面的代码,欢迎大家指教.同时,感谢w3cplus提供 ...

  4. [转]Android中自定义checkbox样式

    android中自定义checkbox的图片和大小   其实很简单,分三步: 1.在drawable中创建文件checkbox_selector.xml: <?xml version=" ...

  5. 【CSS】自定义checkbox样式

    修改原生checkbox样式. 效果 原理 1.利用CSS3属性 appearance. 该属性(强制)更改(改变)默认(原生)样式. Firefox 支持替代的 -moz-appearance 属性 ...

  6. bootstrap table 自定义checkbox样式

    //css <style> .checkbox-custom { position: relative; padding: 0 15px 0 25px; margin-bottom: 7p ...

  7. 利用伪元素before实现自定义checkbox样式

     原理:label标签的for属性可以将文字与复选框进行关联,点击文字可以同时将复选框选中. 隐藏checkbox标签,利用label标签的before伪元素来实现自定义样式.设置before伪元素的 ...

  8. Android 自定义CheckBox 样式

    新建Android XML文件,类型选Drawable,根结点选selector,在这定义具体的样式. <?xml version="1.0" encoding=" ...

  9. Android 自定义CheckBox样式

    1.首先在drawable文件夹中添加drawable文件checkbox_style.xml. <selector xmlns:android="http://schemas.and ...

随机推荐

  1. Win32<CreatFile>

    CreateFile函数详解 CreateFile The CreateFile function creates or opens the following objects and returns ...

  2. Android开发:碎片Fragment完全解析fragment_main.xml/activity_main.xml

    Android开发:碎片Fragment完全解析   为了让界面可以在平板上更好地展示,Android在3.0版本引入了Fragment(碎片)功能,它非常类似于Activity,可以像 Activi ...

  3. [c#]asp.net开发微信公众平台(8)微信9大高级接口，自定义菜单

    前7篇把最基础的消息接收和回复全做完了,  也把高级接口的入口和分拆处理写好了空方法,  此篇接着介绍微信的9大高级接口, 并着重讲解其中的自定义菜单. 微信9大接口为: 1.语音识别接口 2.客服接 ...

  4. 关于textarea标签在谷歌跟火狐可以拖动大小

    关于textarea标签在谷歌和火狐可以拖动大小 而在IE是不会出现这种情况的 解决的方法:我们给这个标签加个 resize: none; 就可以解决了

  5. 常用mysql笔记

    1.insert into ... values insert into tables (col1,col2) values (1,2),(2,3); 2.insert into ... select ...

  6. 修改Servlet模板

    1.找到jar文件 查看MyEclipse根目录下的myeclipse.ini,找到Common文件夹的位置,打开文件夹..\Common\plugins 找到文件 com.genuitec.ecli ...

  7. 如何发布Web项目到互联网

    比如我们有个项目想要发布到互联网上,我们首先需要购买域名以及主机,主机的话,推荐云主机(本人推荐西部数码或者阿里云),性能好: 我们先在云主机上搭建环境,比如Mysql,Jdk,Tomcat: 然后我 ...

  8. 【转】char *str 和 char str[]的区别

    char str[] = "abcd";定义了一个局部字符数组,返回它的地址肯定是一个已经释放了的空间的地址. 此函数返回的是内部一个局部字符数组str的地址,且函数调用完毕后 此 ...

  9. MySQL学习笔记(5) - 修改和删除数据库

    1.完整语句 ALTER {DATABASE | SCHEMA} [db_name] [DEFAULT] CHARACHER SET [=] charset_name; 2.修改数据库的编码方式 al ...

  10. 在PHP中PDO解决中文乱码问题

    $this->pdo = new PDO($dsn, $user, $password, array(PDO::ATTR_PERSISTENT => true)); $stmt = $th ...