看到那些UI框架都是有美化checkbox多选框的，不过大多是图片或者是字体图标。于是就利用label仿了个多选框效果。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        input{

            opacity: 0;

            position: absolute;

            top: 0;

            left: 0;

        }

        p{

            width: 20px;

            height: 20px;

            padding: 3px;

            margin-left: 50px;

            background-color: #88d;

            opacity: .6;

            border: 1px solid #333;

        }

        label{

            position: relative;

            display: block;

            width: 100%;

            height: 100%;

        }

        label:after{

            position: absolute;

            top: 5px;

            left: 4px;

            content: '';

            display: block;

            width: 10px;

            height: 6px;

            border-bottom: 1px solid #333;

            border-left: 1px solid #333;

            transform: rotate(-45deg)

        }

        input:checked + label{

            opacity: 0;

        }

    </style>

</head>

<body>

    <p>

        <input type="checkbox" id="all" name="">

        <label for="all"></label>

    </p>

</body>

</html>

美化checkbox多选框的更多相关文章

  1. css input checkbox复选框控件 样式美化的多种方案

    checkbox复选框可能是网站中常用的html元素,但大多数人并不满意它的默认样式,这篇文章就讲讲如何实现input checkbox复选框控件 样式美化效果. 资源网站大全 https://55w ...

  2. 10个HTML5美化版复选框和单选框

    单选框Radiobox和复选框checkbox在网页中也十分常见,虽然它没有按钮的交互性强,但是如果能把它们像按钮那样美化一下,那也是非常不错的.本文收集了10个相对比较漂亮的美化版单选框和复选框,希 ...

  3. php获取checkbox复选框的内容

    php获取checkbox复选框的内容   由于checkbox属性,所有必须把checkbox复选择框的名字设置为一个如果checkbox[],php才能读取,以数据形式,否则不能正确的读取chec ...

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

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

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

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

  6. php怎么获取checkbox复选框的内容？

    由于checkbox属性,所有必须把checkbox复选择框的名字设置为一个如果checkbox[],php才能读取,以数据形式,否则不能正确的读取checkbox复选框的值哦. <form n ...

  7. checkbox复选框样式

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

  8. php checkbox复选框值的获取与checkbox默认值输出方法

    php获取 checkbox复选框值的方法,checkbox在php读取值时要用数组形式哦,我们读取这些值用php post获取是以一个array形式哦. php获取 checkbox复选框值的方法 ...

  9. js做全选，用一个checkbox复选框做多个checkbox复选框的全选按钮，有一个复选框未被选择时，全选按钮的checked就为false

    用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...

随机推荐

  1. 【TypeScript】TypeScript 学习 2——接口

    在 TypeScript 中,接口是用作约束作用的,在编译成 JavaScript 的时候,所有的接口都会被擦除掉,因为 JavaScript 中并没有接口这一概念. 先看看一个简单的例子: func ...

  2. Elasticsearch 在 windows 和 ubuntu 下详细安装过程

    1. 前言 作为一名 .NET 平台开发者,选择开发框架时总会面临更多的局限性,不过对于搜索这种刚需服务来说,开源框架可供选择的余地还是比较大的.笔者之前用的是 Lucene.net ,现在深感其使用 ...

  3. DevExpress中Tile Application窗体的模型架构图

    DEV中Tile Application模型架构比较复杂,整理一下和大家分享. 图中:立体代表类:虚线椭圆代表属性.

  4. Python 数据结构与算法——桶排序

    #简单的桶排序 def bucksort(A): bucks = dict() # 定义一个桶变量,类型为字典 for i in A: bucks.setdefault(i,[]) # 每个桶默认为空 ...

  5. 拒绝“高冷”词汇！初学C#中实用的泛型！

    初学C#,整天对着业务逻辑,写反反复复的“过程型”代码逻辑十分枯燥,不如用点新东西提升一下代码效率,让代码看起来更有逼格?! 好,下面我们看看C#中简单易学的泛型. 首先,我写了一个这样的方法 --- ...

  6. 隐式等待-----Selenium快速入门（九）

    有时候,网页未加载完成,或加载失败,但是我们后续的代码就已经开始查找页面上的元素了,这通常将导致查找元素失败.在本系列Selenium窗口切换-----Selenium快速入门(六)中,我们就已经出现 ...

  7. select * 和 select 所有字段写出来 ，速度对比！

    从很早时候,听老师说 select * from table  比 select a,b,c,d from table 要慢很多.3年来从未测试.  今天没事测一测, 不测不知道,一测吓一跳. 当然 ...

  8. 关于EF中使用Migrations的一些小提示

    在运行正常的情况下,EF的数据迁移功能非常强大.但是当它出现状况时,试图找到问题发生的原因时通常都很让人郁闷(没法调试,提示信息很模糊等等原因).我花了很多时间来确保在我的迁移能工作正常,然后我整理了 ...

  9. linux 基本操作笔记

        linux文件系统的实现 linux有一个树状结构来组织文件,数的顶端为根目录/,节点为目录,而末节点为所包含的数据文件.我们可以对文件进行多种操作,比如打开和读写.   存储设备分区   文 ...

  10. 如何使用socket进行java网络编程（五）

    本篇记录: 1.再谈readLine()方法 2.什么是真正的长连接 最近又参与了一个socket的项目,又遇到了老生常谈的readLine()问题:对方通过其vb程序向我方socketServer程 ...