二十六、css3改变checkbox复选框的样式

时间：2022-04-11 12:24:56
<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style>

			span {

				position: relative;

			}

			.input_check {

				position: absolute;

				visibility: hidden;

			}

			.input_check+label {

				display: inline-block;

				width: 16px;

				height: 16px;

				border: 1px solid #c00;

			}

			.input_check:checked+label:after {

				content: "";

				position: absolute;

				left: 2px;

				bottom: 12px;

				width: 9px;

				height: 4px;

				border: 2px solid #e92333;

				border-top-color: transparent;

				border-right-color: transparent;

				-ms-transform: rotate(-60deg);

				-moz-transform: rotate(-60deg);

				-webkit-transform: rotate(-60deg);

				transform: rotate(-45deg);

			}

		</style>

	</head>

	<body>

		<span><input type="checkbox" class="input_check" id="check3"><label for="check3"></label></span>

	</body>

</html>

　　

二十六、css3改变checkbox复选框的样式的更多相关文章

  1. CSS3自定义checkbox复选框

    在线演示 本地下载

  2. 【转】纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  3. 转 纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  4. 纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  5. 纯css3简单实用的checkbox复选框和radio单选框

    昨天为大家分享了一款很炫的checkbox复选框和radio单选框,今天再给大家带来一款简单实用的checkbox复选框和radio单选框.界面清淅.舒服.先给大家来张效果图: 在线预览   源码下载 ...

  6. 纯css3实现的超炫checkbox复选框和radio单选框

    之前为大家分享了好多css3实现的按钮.今天要为大家分享的是纯css3实现的checkbox复选框和radio单选框,效果超级炫.先让我们看看图吧! 在线预览   源码下载 这个实例完全由css3实现 ...

  7. checkbox复选框和div click事件重叠，点击div后复选框也被选中，同时改变div颜色，否则则不选中

     checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中 <!DOCTYPE html> <html lang=" ...

  8. checkbox复选框样式

    随着现代浏览器的流行,纯CSS设置checkbox也变的很是实用,下面会讲到5种与众不同的checkbox复选框. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要 ...

  9. 03 CheckBox 复选框

    五  CheckBox  复选框     >概念:可以从一个集合选项中选择一个或者多个选项     >属性:checked   选择状态     >使用:           &gt ...

随机推荐

  1. 如何在VS 2010中使用 VS2013的解决方案&lpar;转&rpar;

    今天要用VS2010打开VS2013,一直觉得VS2010到VS2012只是界面上扁平化的改变,平台工具集有改变但很大程度上可能向上兼容.在网上搜了一些文章,其中有一篇说到一个观点:        从 ...

  2. Seriailizable（序列化） 的是使用

    1.序列化的目的.作用: 为了保存对象的各种状态到内存中(实例变量不是方法),并且可以把保存的对象状态再读取出来.Java提供一种保存对象状态的机制,就是序列化. 2.什么情况下需要序列化       ...

  3. MYSQL 处理批量更新数据的一些经验。

    首先,我们需要了解下MYSQL CASE EXPRESSION 语法. 手册传送门:http://dev.mysql.com/doc/refman/5.7/en/control-flow-functi ...

  4. SpringMVC学习--参数绑定

    spring参数绑定过程 从客户端请求key/value数据,经过参数绑定,将key/value数据绑定到controller方法的形参上.springmvc中,接收页面提交的数据是通过方法形参来接收 ...

  5. Linux大文件分割split和合并cat使用方法

    本文主要介绍linux下两个命令:split和cat.其中,相信大家都熟悉cat命令,一般用来查看一个文件的内容,但是它还其它的功能,比如这里要介绍的文件合并功能,它可把多个文件内容合并到一个文件中. ...

  6. git for windows （又名 msysgit）如何记住用户名和密码

    创建存储用户名密码的文件 在home文件夹,一般是 C:\Documents and Settings\Administrator 下建立文件 .git-credentials (windows下不允 ...

  7. Spring Boot 初识

    发展到今天,spring已经是一个大家族了,如果想要使用其中的两到三个组件就会有多复杂的配置,有时候还有会版本不一致的错误,让人很无奈.于是,就有了spring Boot,spring  Boot   ...

  8. 彻底搞懂字符集编码：ASCII，Unicode 和 UTF-8

    一.ASCII 码 我们知道,计算机内部,所有信息最终都是一个二进制值.每一个二进制位(bit)有0和1两种状态,因此八个二进制位就可以组合出256种状态,这被称为一个字节(byte).也就是说,一个 ...

  9. Git和Svn对比

    From: https://wenku.baidu.com/view/1f090e2e7275a417866fb84ae45c3b3567ecdd12.html Git和Svn对比   共享文档   ...

  10. 修改input标签type&equals;file类型的文字

    <form name="form" id="form" method="post" enctype="multipart/f ...

相关文章