<!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. 《Programming Massively Parallel Processors》Chapter5 习题解答

    自己做的部分习题解答,因为时间关系,有些马虎,也不全面,欢迎探讨或指出错误 5.1 Consider the matrixaddition in Exercise 3.1. Can one use s ...

  2. Android应用程序之间共享文字和图片(二)

    MainActivity如下: package cn.testshare1; import java.io.File; import java.util.ArrayList; import andro ...

  3. Java设计模式---（动态）代理模式

    代理设计模式 定义:为其他对象提供一种代理以控制对这个对象的访问. 动态代理使用 java动态代理机制以巧妙的方式实现了代理模式的设计理念. 之前虽然会用JDK的动态代理,但是有些问题却一直没有搞明白 ...

  4. thinkphp 中 使用七牛云上传

    利用七牛云私有空间存储文件 第一步,注册七牛云,创建空间,将空间设为私有 需要记下的东西: AK,SK,bucket 第二步配置ThinkPHP 在config.php添加 'UPLOAD_SITEI ...

  5. 2:numpy---ndarray

    ndarray即是多维数组[n dimension array] 一:创建ndarray 有好几种创建数组的方法. 例如,你可以使用 array 函数从常规的Python列表和元组创造数组.所创建的数 ...

  6. (转)使用Microsoft Web Application Stress Tool对web进行压力测试

    http://www.blogjava.net/crespochen/archive/2009/06/02/279538.html Web压力测试是目前比较流行的话题,利用Web压力测试可以有效地测试 ...

  7. Android-为何以及如何保存Fragment实例

    在安卓开发中,由于旋转设备会造成配置改变进而导致Activity实例被摧毁(当然也包括Activity托管的Fragment).Activity或Fragment实例被摧毁自然也就让Model被摧毁, ...

  8. [JavaScript] 判断键盘同时按某些键时执行操作。

    前言:之前知乎上看到过一个介绍国外炫酷网站的,其中一个敏感网站用同时按住"q.a.p.l" 才能观看视频 放手则立即强制停止 (手动斜眼).这个功能的实际用处,我认为是可以在做一些 ...

  9. [转]Mac App distribution in App Store

    Mac程序的大包上传和iOS的有些许不同,因为Mac app既可以上传到store,也可以不通过store供人下载.因此,code sign和provision要根据情况(开发,release< ...

  10. django 自定用户系统 以及 Django Model 定义语法

    http://www.tuicool.com/articles/jMzIr2 django使用自己的用户系统 http://www.jianshu.com/p/c10be59aad7a Django ...