<!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. Linux下Weblogic域的创建过程

    环境介绍:操作系统 :Redhat 5.5Weblogic :英文版 8.1.6 Weblogic安装目录 :/weblogic 一.域的建立执行下面语句进入weblogic的bin目录: cd /w ...

  2. 命令行运行android模拟器

    创建模拟器 android create avd --name avd_4.1 --target "android-16" --abi armeabi-v7a Android 4. ...

  3. CentOS6.7 用户

    1.添加普通用户[root@server ~]# useradd chenjiafa   //添加一个名为chenjiafa的用户[root@server ~]# passwd chenjiafa   ...

  4. SuperSocket快速入门（二）：启动程序以及相关的配置

    如何快速启动第一个程序 既然是快速入门,所以,对于太深奥的知识点将不做讲解,会在后续的高级应用章节中,会对SS进行拆解.所有的实例90%都是来自SS的实例,外加本人的注释进行讲解. 一般应用而言,你只 ...

  5. F# 既能解释执行，也能编译执行

    F# 除了是函数式语言和面向对象语言之外,还有个突出的特点是:既能解释执行,也能编译执行.   一般说来,一种语言只能选择其一种.比如说C++.C#是编译执行,不能解释执行,象Matlab.R是解释执 ...

  6. 常用mysql笔记

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

  7. Slony-I双机备份

    测试环境:postgresql 9.3.5,slony-I2.2.3(application stack builder提供)以下参考网上教程亲自测试总结 ---------------------- ...

  8. js_day2

    1)<script src="dsad.js"> 不是  scr= 2)

  9. LINUX服务器配置NFS服务，挂载外部存储实现目录共享

    安装nfs  rpcbind 一.服务端配置 安装 NFS 服务器所需的软件包:nfs 和 rpcbind # yum install nfs-utils # yum install rpcbind( ...

  10. isArray

    判断一个玩意是不是数组: (1)新方法:Array.isArray(); (2)旧方法:toString(); <!doctype html> <html lang="en ...