看到那些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. Elasticsearch 的一些关键概念

    我更喜欢把 Elasticsearch 作为一种 nosql 去理解,它的一些开发概念和 MongoDB 以及 Redis 没有太大的区别,不过了解 Elasticsearch 中的一些核心概念对于你 ...

  2. JS里关于特殊字符的转义

    重定向的url里含有百分号“%”,遇到了apache 找不到该文件的报错.通过查询相关文档,知道了原来是url里含有特殊字符要转码才能定位到正确的地址.比如"%"要转码为" ...

  3. C# RS232串口使用

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  4. C#远程桌面连接工具

    1.注册控件:regsvr32 C:\Windows\System32\mstscax.dll. 2.添加RDP Control控件到工具箱中.我选择的RDP Client Control (redi ...

  5. 使用Navicat 创建mysql存储过程，实现日期加流水号序列

    目的:使用Navicat 创建mysql存储过程,实现格式为8位日期(年月日)+5位流水号序列. 步骤: 1.打开Navicat 登录数据库,点击导航栏上的函数,如下图: 2.点击新建函数,选择“过程 ...

  6. 使用SecureCRT的SFTP传输文件

    使用SecureCRT的SFTP传输文件 使用 FileZilla 上传项目更新,因为软件缓存没处理好,三个文件花了三个小时~~ 找一种缓存干扰最小的方式上传文件. 1.在使用 SecureCRT 连 ...

  7. Vue+Flask看这篇就够了

    一.项目目录结构 使用Vue+Flask搭建前后端分离的基础平台. my_project/ app/ //vue目录 static/ models/ remplates/ 404.html index ...

  8. linux文件的硬连接和软连接

    建立软连接:ln -s 原路径 目标路径 原理示意图: 特点: 1.     相当于win中的快捷方式 2.     删除链接文件,源文件不受影响 3.     删除源文件,链接文件失效 4.     ...

  9. 下载一个vue项目执行npm install 后运行项目npm run dev后出错 - 问题解决

    在SVN上拉下来一个vue项目,上面没有提交项目里面的node_modules文件夹,所以要自己执行 npm install 安装,但安装完后运行项目后却报错了: $ npm run dev > ...

  10. python 查找字符串中字母的个数

    2017.6.17 更新:好像知道错在哪里了.以第一个为例,输入应该是“AHHaaBBa”,因为直接输入AHHaaBBa时,系统不知到这是一个变量还是字符串,所以必须输入的时候申明定义.既然这样的话, ...