看到那些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. Python学习-29.Python中列表的一些操作

    in关键字: 注意这个是关键字,用来判断元素是否在集合中存在. list = ['a','b','c'] print('a' in list) print('f' in list) 将依次输出 Tru ...

  2. System.Windows.Freezable 在未被引用的程序集中定义

    System.Windows.Freezable 在未被引用的程序集中定义 解决方法 添加windowsbase.dll 引用

  3. Facebook支撑万亿Post搜索背后的技术窥探

    转自http://www.csdn.net/article/2013-10-29/2817333-under-the-hood-building-posts-search 近日,Facebook为po ...

  4. LeetCode143：Reorder List

    题目: Given a singly linked list L: L0→L1→…→Ln-1→Ln, reorder it to: L0→Ln→L1→Ln-1→L2→Ln-2→… You must d ...

  5. BlangenOA项目总结

    1.使用EF,当返回的是IQueryable<T>类型,延迟加载. 2.增删改查 分页(页码,页大小,总记录数,是否升序)(两个lambda表达式,一个筛选规则,一个是排序规则(可以选择类 ...

  6. koa和egg项目webpack热更新实现

    背景 在用Node.js+Webpack构建的方式进行开发时, 我们希望能实现修改代码能实时刷新页面UI的效果. 这个特性webpack本身是支持的, 而且基于koa也有现成的koa-webpack- ...

  7. Java的动态编译、动态加载、字节码操作

    想起来之前做的一个项目:那时候是把需要的源代码通过文件流输出到一个.java文件里,然后调用sun的Comipler接口动态编译成.class文件,然后再用专门写的一个class loader加载这个 ...

  8. ovs 源mac， 目的src 互换

    push:NXM_OF_ETH_SRC[],push:NXM_OF_ETH_DST[],pop:NXM_OF_ETH_SRC[],pop:NXM_OF_ETH_DST[] 1:把src mac推到栈顶 ...

  9. JVM概念总结：数据类型、堆与栈

    Java虚拟机中,数据类型可以分为两类:基本类型和引用类型.基本类型的变量保存原始值,即:他代表的值就是数值本身: 引用类型的变量保存引用值,引用值代表了某个对象的引用而不是对象的本身,对象的本身存放 ...

  10. mybatis单表操作实现完全java代码封装

    之前在项目中用到mybtis操作数据库时都是手动写sql,对于我这种sql水平不是很好地人来说痛苦死了:动态查询的sql我表示到现在还不会写呀! 还好,利用数据库表反向生成的工具可以帮我解决大部分的s ...