<!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. 深入解读ESB与SOA的关系

    时至今日,SOA的概念渐渐清晰了.   有关ESB的概念,已经吵了好多年了,还是没有定论. 我个人认为,ESB本来就是抽象的概念,而且内涵丰富,在不同的场合含义不同.因此应该从不同的角度来认识.   ...

  2. 新浪微博登陆，获取token

    用WeiboAuthListener获取code 用下面的代码获取token..半成品的sdk真让人捉急. String code = values.getString("code" ...

  3. [Node.js] node-persist: localStorage on the server

    // Save data var storage = require('node-persist'); storage.init(); var people= require('./people.js ...

  4. Android原理揭秘系列之一动态墙纸

    Livewallpaper,即动态墙纸,是Android的一大3D特色功能,用户可以在桌面选择加载动态墙纸,让自己的手机桌面背景旋动起来. 相对于静态桌面壁纸,动态墙纸可以展示各种动态变化的背景,而与 ...

  5. Python 日期和时间(转)

    Python 日期和时间 Python程序能用很多方式处理日期和时间.转换日期格式是一个常见的例行琐事.Python有一个 time 和 calendar 模组可以帮忙. 什么是Tick? 时间间隔是 ...

  6. Android(工具・集成)

    ■ NDK Android从始(2009)至终是支持JNI的. 只不过一开始没有NDK.需要自己安装交叉编译器创建so,然后放到assert之类捆绑so发布. 有了NDK.有了什么? libc lib ...

  7. MySQL常用命令大全（转）

    下面是我们经常会用到且非常有用的MySQL命令.下面你看到#表示在Unix命令行下执行命令,看到mysql>表示当前已经登录MySQL服务器,是在mysql客户端执行mysql命令. 登录MyS ...

  8. 【nodejs学习】1.文件操作

    1.小文件拷贝,使用nodejs内置模块 var fs = require('fs'); function copy(src, dst){ fs.writeFileSync(dst, fs.readF ...

  9. C#操作EXCEL的时候出现“ 无法将类型为“Microsoft.Office.Interop.Excel.ApplicationClass”的COM 对象强制转换为接口类型“Microsoft.Office.Interop.Excel._Application” ”问题

    总是报出这个错误,准备放弃COM的组件转投NPOI,后来想起在装这个操作系统的时候,自带装过WPS,后来使用360卸载了.于是想着试一试的心态,重新安装了WPS,结果,问题解决了.你懂的.

  10. 数位dp整理

    数位dp的思想就在于递归,记录当前的某一个唯一状态,依次递归下去,要注意唯一. 数位dp常设的状态有当前位置,上一数字,是否具有前导零,是否有限制. 1.CodeForces 55DBeautiful ...