看到那些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. [FMX]在 FMX 程序中绘制单像素宽度的直线 [FMX]在 FMX 程序中绘制单像素宽度的直线

    [FMX]在 FMX 程序中绘制单像素宽度的直线 2017-10-09 • Android.Delphi.教程 • 暂无评论 • swish •浏览 353 次 在前面的一篇文章中,我介绍了一种绘制低 ...

  2. Android-Xml,PullParser,解析

    在上一篇博客,Android-XML格式描述,介绍来XML在Android中的格式: 解析persons.xml文件内容: <?xml version="1.0" encod ...

  3. [Openwrt 项目开发笔记]：MySQL配置（六）

    [Openwrt项目开发笔记]系列文章传送门:http://www.cnblogs.com/double-win/p/3888399.html 正文: 在本人的项目中,运行在路由器上的服务器采用Ngi ...

  4. Team Foundation Server (TFS) 2017 团队资源管理器

    在千呼万唤中,TFS 2017团队资源管理器终于发布了,对于所有TFS系统的用户,都是一个天大的喜讯,尤其是对于不经常做.NET开发的团队成员. 大家都知道,伴随TFS 2013(和之前的版本)的发布 ...

  5. C#实现在图片上动态写内容

    之前在项目上遇到这么一个需求,就是要在图片上写内容,而且要求是动态,我所谓的动态就是在图片上写的内容是动态的.网上找了找,很多人实现了网图片上写内容的功能,但是,并没有实现动态.所以在这里把我的解决办 ...

  6. 阿里云ECS服务器windows环境下配置redis

    一.下载解压redis github下载地址:https://github.com/MSOpenTech/redis/tags 下载的是Redis-x64-3.2.100版本,Redis-x64-3. ...

  7. CC2530学习路线-基础实验-串口通讯发送字符串(4 未完待续)

    目录 1. 前期预备知识 1.1 串口通讯电路图 1.2 实验相关寄存器 1.2 常用波特率设置 本章未完待续..... 原来写的文章已经丢失了,只能找到这一小部分,看什么时候有时间再补上. 1. 前 ...

  8. log Log4NET配置

    Log4Net是用来记录日志的,可以将程序运行过程中的信息输出到一些地方(文件.数据库.EventLog等),日志就是程序的黑匣子,可以通过 日志查看系统的运行过程,从而发现系统的问题.日志的作用:将 ...

  9. 构造回文-C++实现

    腾讯2017暑期实习生招聘笔试题……做了一个世纪才做出来 //腾讯2017暑期实习生招聘第一道题.做了一个世纪才做出来………………太菜了 /** 题目: 给定一个字符串s,你可以从中删除一些字符,使得 ...

  10. python scapy 网卡发包

    from scapy.all import * pkt = Ether(src='11:22:33:44:55:77', dst='11:22:33:44:55:66')/ARP(op="w ...