.checkbox-wrap{
position:relative
}
.checkbox-wrap::before{
content: '';
position: absolute;
top: 31%;
width: 16px;
height: 16px;
background: #fff;
border: 1px solid #e6e6e6;
border-radius: 3px;
z-index: 1;
}
.checkbox-wrap::before:hover{
border: 1px solid #5FB878;
} .checked::after{
content: '';
position: absolute;
top: 31%;
width: 16px;
height: 16px;
background:#5FB878 url("{{ asset('assets/admin/images/checked.png') }}") no-repeat center;
background-size: 80%;
background-position-x: 2.5px;
border: 1px solid #5FB878;
border-radius: 3px;
z-index: 1;
} .checkbox-wrap input[type=checkbox]{
position:absolute;
z-index:-1
}

CSS - checkbox 样式的更多相关文章

  1. 用css改变默认的checkbox样式

    自己常用的改变checkbox样式的两个方法: 一.利用background用图片代替checkbox效果 缺点:你首先得有一张好看的图片 优点:浏览器兼容性好 <!doctype html&g ...

  2. CSS控制checkbox样式

    原文地址:http://www.xiumu.org/technology/style-checkboxes-with-css.shtml#comments Checkbox复选框是一个可能每一个网站都 ...

  3. 使用CSS实现自定义input[checkbox]样式

    思路:使用label上的for熟悉,与checkbox上的id相对应来达到点击选中效果,在使用伪元素,或者其他元素,定位至checkbox上方,替代checkbox,并且隐藏checkbox,使用CS ...

  4. 【CSS】自定义checkbox样式

    修改原生checkbox样式. 效果 原理 1.利用CSS3属性 appearance. 该属性(强制)更改(改变)默认(原生)样式. Firefox 支持替代的 -moz-appearance 属性 ...

  5. WPF CheckBox样式 ScrollViewer样式 WrapPanel、StackPanel、Grid布局

    本节讲述布局,顺带加点样式给大家看看~单纯学布局,肯定是枯燥的~哈哈 那如上界面,该如何设计呢? 1.一些布局元素经常用到.Grid StackPanel Canvas WrapPanel等.如上这种 ...

  6. 纯CSS菜单样式,及其Shadow DOM,Json接口 实现

    先声明,要看懂这篇博客要求你具备少量基础CSS知识, 当然如果你只是要用的话就随便了,不用了解任何知识 完整项目github链接:https://github.com/git-Code-Shelf/M ...

  7. 定制 input[type="radio"] 和 input[type="checkbox"] 样式

    表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...

  8. bootstrap table 自定义checkbox样式

    //css <style> .checkbox-custom { position: relative; padding: 0 15px 0 25px; margin-bottom: 7p ...

  9. 修改checkbox样式-1

    说明 使用伪类来对复选框进行样式修改.以下以最简单的一个样式修改为实例进行说明. 步骤介绍: 将一个label与复选框进行绑定,将两者放在同一个div下 调整 label的外部样式使其作为复选框的外形 ...

  10. layui checkbox 样式

    layui  checkbox扩展插件:  一.新建  checkbox.css 样式文件 .checkBox .block{float:left; margin:5px;padding:6px 6p ...

随机推荐

  1. 【Python】【OpenCV】定位条形码(一)

    关于二维码和条形码的检测和识别,在OpenCV中已经有提供了对应的API,cv2.QRCodeDetector() | cv2.barcode_BarcodeDetector() ,相关的实现极其简单 ...

  2. windows10更新文件存在哪里

    windows10更新文件存在哪里windows10更新文件存在哪里 电脑系统每次更新都会有相应的更新文件,很多win10用户都想知道电脑更新文件存在哪里,其实这个很好找的. 你先双击此电脑进入,然后 ...

  3. Android开发之账号密码登录跳转、固定时间显示进度条实现

    登陆界面.登陆跳转和进度条功能实现 首先打开Android studio新建一个空项目,打开layout文件夹下的activity_main.xml文件,来设置登陆界面的布局.登陆界面需要两个输入框, ...

  4. 在Linux Docker中部署RStudio Server,实现高效远程访问

    在Linux Docker中部署RStudio Server,实现高效远程访问     前言 RStudio Server 使你能够在 Linux 服务器上运行你所熟悉和喜爱的 RStudio IDE ...

  5. Karmada 结合 coreDNS 插件实现跨集群统一域名访问

    本文分享自华为云社区<Karmada 结合 coreDNS 插件实现跨集群统一域名访问>,作者:云容器大未来 . 在多云与混合云越来越成为企业标配的今天,服务的部署和访问往往不在一个 K8 ...

  6. storybook 编写stories的story基础语法

    编写 stories story 用于展示组件某个状态,每个组件可以包含任意多个 story,用来测试组件的各种场景.根据默认配置,只需要在组件的文件夹中,以 **.component.stories ...

  7. 火山引擎DataTester分享:A/B实验中常见的8个错误

    火山引擎DataTester是科学可信的A/B测试与智能优化平台,源自字节跳动长期沉淀,能够深度耦合推荐.广告.搜索.UI.产品功能等多种行业场景需求,为业务增长.转化.产品迭代,运营提效等各环节提供 ...

  8. Solon 问答:项目如何直接添加 https 支持?

    app.yml 添加两行配置即可: #设定SSL证书(支持:solon.boot.jdkhttp 或 solon.boot.jlhttp 或 solon.boot.jetty 或 solon.boot ...

  9. Windows 2016 安装 Docker

    打开 PowerShell Windows PowerShell 版权所有 (C) 2016 Microsoft Corporation.保留所有权利. PS C:\Users\Administrat ...

  10. Mac下Homebrew替换镜像

    替换git和homebrew镜像源 一.git加速 查找域名对应的地址 nslookup github.com nslookup github.global.ssl.fastly.Net 修改host ...