<!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. 有利于SEO的DIV+CSS规范小结

    一.CSS文件及样式命名 1.CSS文件命名规范 全局样式:global.css:框架布局:layout.css:字体样式:font.css:链接样式:link.css:打印样式:print.css: ...

  2. 10个热门IT证书

    MCP (微软专家认证) CCNA (思科认证网络支持工程师) MCPD (微软认证开发专家) SCJP (SUN认证Java程序员) CISSP (信息系统安全认证专家) CompTIA A+认证 ...

  3. netstat 命令详解

    netstat命令是一个监控TCP/IP网络的非常有用的工具,它可以显示路由表.实际的网络连接以及每一个网络接口设备的状态信息,在我的计算机上执行netstat后,其输出结果为:netstat命令是一 ...

  4. .NET基础拾遗（7）多线程开发基础2

    二..NET中的多线程编程 2.1 如何在.NET程序中手动控制多个线程? 最直接且灵活性最大的,莫过于主动创建.运行.结束所有线程. (1)第一个多线程程序 .NET提供了非常直接的控制线程类型的类 ...

  5. position:fixed定位时 “高度坍塌” 问题的解决

    问题:对于固定定位的元素,固定住高度,后面紧跟的模块会当做前面的固定元素不存在似的,这给布局带来了困扰 解决方法: 1.给第二个模块div设置margin-top的值,margin-top的值设为大于 ...

  6. （转）js学习笔记（）函数

    1.调用函数时,如果参数多于定义时的个数,则多余的参数将会被忽略,如果少于定义时的个数则缺失的参数数会被自动赋予undefined值. 2.如果是用function语句声明的函数定义则不可以出现在循环 ...

  7. (搬运工)推荐！国外程序员整理的 C++ 资源大全

    标准库 C++标准库,包括了STL容器,算法和函数等. C++ Standard Library:是一系列类和函数的集合,使用核心语言编写,也是C++ISO自身标准的一部分. Standard Tem ...

  8. uva 10038 - Jolly Jumpers

    #include <iostream> #include <cstdio> #include <stdlib.h> using namespace std; ], ...

  9. SharedPreference简介

    SharedPreference 是一种简单的.轻量级的名称/值对(NVP)机制,用于保存原始应用程序数据. 使用SharedPreferences类可以创建名称/值对的命名映射,他们可以在会话之间持 ...

  10. BZOJ 1492 货币兑换Cash

    http://www.lydsy.com/JudgeOnline/problem.php?id=1492 思路: 问题转变为维护一个凸包,每次转移都找凸包上的点,并更新凸壳 可以用splay维护,或者 ...