.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. ASR项目实战-架构设计

    一般而言,业务诉求作为架构设计的输入. 需求清单 对于语音识别产品而言,需满足的需求,举例如下: 功能需求 文件转写. 长文件转写,时长大于60秒,小于X小时,X可以指定为5. 短文件转写,时长小于6 ...

  2. 【源码系列#05】Vue3响应式原理(Ref)

    Ref & ShallowRef ref:接受一个参数值并返回一个响应式且可改变的 ref 对象.ref 对象拥有一个指向内部值的单一属性 .value 可以将 ref 看成 reactive ...

  3. Windows 7更新失败的解决方法

    你好,1.在开始菜单中点击运行,→输入"services.msc"→找到"windows update"右击选择"停止":2.进入C:\wi ...

  4. 请注意,你的 Pulsar 集群可能有删除数据的风险

    在上一篇 Pulsar3.0新功能介绍中提到,在升级到 3.0 的过程中碰到一个致命的问题,就是升级之后 topic 被删除了. 正好最近社区也补充了相关细节,本次也接着这个机会再次复盘一下,毕竟这是 ...

  5. 解决 cv2.destroyAllWindows() 无效问题

    方法一 示例代码: import cv2 import numpy as npimg = np.zeros((512,512),np.uint8)#生成一个空灰度图像 cv2.line(img,(0, ...

  6. Feign传递参数

    传递单个参数 1客户端 @RequestMapping("/one") public BaseResp one(@RequestParam("id") Inte ...

  7. 基于k6和python进行自动化性能测试

    摘要:在性能测试中,达到相应的性能指标对于一个软件来说十分重要,在本文中,将介绍一种现代化性能测试工具k6. 本文分享自华为云社区<基于k6和python进行自动化性能测试>,作者: 风做 ...

  8. 开发老人笔记:Git 常用命令清单

    摘要:git是目前世界上最先进的分布式版本控制系统. 多人协作 master:此分支用来发布稳定的代码,合并一般是由管理员合并 dev:此分支用于团队开发,团队成员向此分支提交代码 bug:此分支用于 ...

  9. Python 的 sum():Pythonic 的求和方法

    摘要:Python 的内置函数sum()是一种对数值列表求和的有效且Pythonic 的方法.将多个数字相加是许多计算中常见的中间步骤,因此sum()对于 Python 程序员来说是一个非常方便的工具 ...

  10. java并发编程(2):Java多线程-java.util.concurrent高级工具

    高级多线程控制类 Java1.5提供了一个非常高效实用的多线程包:java.util.concurrent, 提供了大量高级工具,可以帮助开发者编写高效.易维护.结构清晰的Java多线程程序. Thr ...