.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项目实战-构建Kaldi

    准备工作 安装构建时依赖的基础软件 软件清单如下: bzip2 python3 automake libtool cmake gcc g++ gfortran git subversion 不同平台安 ...

  2. 自定义md-loader来简单高效的维护组件文档

    个人觉得,组件库最难的不是开发,而是使用,怎么才能让组内同事都用起来,这才是关键 背景 虽然现在开源的组件库很多,但每个项目里还是或多或少都会有人封装出一些项目内通用的基础组件.业务组件 我参与过多个 ...

  3. CTFshow元旦水友赛 CRYPTO WP

    CRYPTO 新年祝福 题目 加油!为跨年夜还在努力的自己加油! ctfshow全体工作人员,祝您学业有成,阖家幸福! 解码下面base64 Y3Rmc2hvd3vmlK/ku5jlrp3lj6Pku ...

  4. Python——第二章:字典的循环、嵌套、"解构"(解包)

    字典进阶操作 -- 循环和嵌套 字典的循环 我们先看直接打印字典的样子,会分别对每对key:value进行打印,并使用,分隔他们 dic = { "赵四": "特别能歪嘴 ...

  5. Windows 监控配置

    1:Windows2003服务器 2:Windows Sever 2008安装snmp 3:Windows Sever 2012安装snmp 4:Windows 10安装snmp 服务配置 双击打开[ ...

  6. RocketMQ 的基本使用

    RocketMQwiki是一个分布式消息和流数据平台,具有低延迟.高性能.高可靠性.万亿级容量和灵活的可扩展性.RocketMQ是2012年阿里巴巴开源的第三代分布式消息中间件,2016年11月21日 ...

  7. 5大特性,带你认识化繁为简的华为云CodeArts Deploy

    摘要:2月27日,华为云发布持续部署服务CodeArts Deploy,通过模块化自由编排部署流程,实现软件的自动化部署,帮助企业软件产品的快速.高效.高质量交付. 本文分享自华为云社区<化繁为 ...

  8. 从标准到开发,解读基于MOF的应用模型管理

    摘要:为了打破技术与业务的壁垒,搭建技术与业务的桥梁,因此基于如下流程实现应用业务模型管理 ROMA ABM. 在数字经济时代,数据正在成为企业极其重要的战略性资产.在政府方面,数据第一次作为新型生产 ...

  9. 先收藏!关于Java类、接口、枚举的知识点大汇总

    摘要:Java知识点精选之类.接口.枚举30问,算是比较基础的,希望大家一起学习进步. 整理了一些JAVA语言的在类.接口.枚举等方面的知识点以及大家常遇到的问题.希望能帮助到大家. Q: 各修饰符所 ...

  10. vue2升级vue3:Vue Router报错,directly inside <transition> or <keep-a

    vue3 报这个错误: vue-router.mjs:35 [Vue Router warn]: <router-view> can no longer be used directly ...