自定义checkbox样式

通过选中时添加背景图片自定义CheckBox样式

效果:

CSS样式:

 

 <style type="text/css>label {width: 10%;display: flex;display: -webkit-flex;display: -moz-flex;flex-direction: row;justify-content: center;align-items: center;}label input[type=checkbox] {width: 15px;height: 15px;overflow: hidden;background: #fff;appearance: none;-webkit-appearance: none;border: 1px solid #808080;outline: none;margin-right: 5px;margin-top: 0;}input[type=checkbox]:checked {appearance: none;-webkit-appearance: none;background-image: url(./Images/btn-blue_03.png);background-position: center;background-repeat: no-repeat;background-size: 100%;border-radius: 4px;border: 0;overflow: hidden;}</style>

 

  

 

html结构:
<body><label><input type="checkbox" name="type" checked><span>one</span></label><label><input type="checkbox" name="type"><span>two</span></label>
</body> 

  

 

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/366285.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

安装步骤

1、安装node&#xff0c;安装全局webpack&#xff0c;npm init 生成package.json文件全局打包命令webpack b.js -o bundle.js旧版本的是webpack b.js bundle.js2、npm install webpack --save-dev 引入本项目webpack&#xff0c;package.json文件中会生成对应的webpack版本号…

fpu测试_I510400性能及温度测试详解

5月20号&#xff0c;INTEL将正式销售十代民用桌面级处理器&#xff0c;此次上市的型号相对9代与8代来说要多了很多型号&#xff0c;仅I9系列就有4个型号&#xff0c;下图有此次INTEL更新所有型号的参数&#xff1a;从上图参数可知&#xff0c;Intel有史以来I3~I9全部支持超线程…

java multiline_Java 7 - Multiline strings

问题Ive read that multiline string literals were proposed to be added in Java 7.Although I cant find any documentation saying definitely that they have been. Id like to know if they are, because this is something Id consider switching versions for.回答1:Mu…

洛谷P1876开灯

题目描述 有n盏灯&#xff0c;一开始全是关闭的。来n个人&#xff0c; 第一个人把一的倍数的灯开着的关上&#xff0c;关上的打开。 第二个人把二的倍数的灯开着的关上&#xff0c;关上的打开。 第三个人把三的倍数的灯开着的关上&#xff0c;关上的打开。 ........ 问最后第几…

HMTL label标签

label标签和特定表单控件关联之后&#xff0c;如果用户在 label 元素内点击文本&#xff0c;就会触发关联的表单控件。就是说&#xff0c;当用户选择该label标签时&#xff0c;浏览器就会自动将焦点转到和label标签相关的表单控件上。 label标签常用于与checkbox或radio关联&a…

ADFLogger的SLF4J绑定–缺少的部分

由于最好的原因&#xff0c;在我的日常工作中&#xff0c;我希望为ADF Logger Oracle ADF提供一个SLF4J适配器。 毫不奇怪&#xff0c;slf4j没有用于ADFLogger的适配器&#xff0c;但是由于ADFLogger只是Java Util Logging的轻巧包装&#xff0c;因此花了一个多小时来填补这一空…

thinkphp 在接口开发或者接入三方时解决跨域

估计你们都会了&#xff0c;就不解释了&#xff0c;直接上代码把 解决方案&#xff1a;header(Access-Control-Allow-Origin: *); //*代表允许所有的网址请求当前接口&#xff0c;当然你也可以把*改成具体的网址&#xff0c;例如www.baidu.com header("Access-Control-A…

c语言int 转bool_C++代码实现逆波兰式_C 语言

100行以内C代码实现逆波兰式逆波兰式(Reverse Polish notation&#xff0c;RPN&#xff0c;或逆波兰记法)&#xff0c;也叫后缀表达式(将运算符写在操作数之后)。算术表达式转逆波兰式例子&#xff1a;逆波兰式整体的算法流程图如下&#xff1a;下面给出我基于C 语言对逆波兰式…

css的再深入9(更新中···)

一 单位 1.px 就是一个基本的单位 像素 2.em 也是一个单位 用父级元素的字体大小乘以em前面的数字。如果父级没有就继承上一个父级直到body&#xff0c;如果body没有那就默认是16px。 3.rem 也是一个单位&#xff0c;只跟根节点<html>的字体大小有关&#xff0c;如果没…

最佳字符串对齐的Java实现

一段时间以来&#xff0c;我使用了Levenshtein distance的Apache Commons lang StringUtils实现。 它实现了一些众所周知的技巧&#xff0c;通过仅挂接到两个数组而不是为备忘录表分配巨大的nxm表来使用较少的内存。 它还仅检查宽度为2 * k 1的“条带”&#xff0c;其中k为最大…

指令的存储与执行初探

前言导读&#xff1a;从零开始构造一台二进制加法器 假设一个处理器与存储器相连&#xff0c;存储器中存放着一些指令。这些指令通过处理器发出的寻址信号被加载到处理器中&#xff0c;这个过程称为取指令。 下面通过简单的加法运算&#xff0c;来看一下指令和数据是怎么存储在…

java 中的流_Java中的流(IO

Java中的流(IO流.java.io包中定义了多个流类型(类或抽象类)来实现 输入 / 输出功能&#xff0c;可以从不同的角度对其进行分类&#xff1a;按单位可分为&#xff1a; 字节流 (一个字节一个字节的读取) 字符流 (一个字符一个字符的读取『一个字符是两个字节』)按…

python基础学习_35岁零基础学习Python编程是否能学得会并用得上

首先&#xff0c;学习编程语言并没有年龄上的限制&#xff0c;在当前的工业互联网时代&#xff0c;不论是初级职场人还是资深职场人&#xff0c;学习一门编程语言都是有必要的&#xff0c;从这个角度来看&#xff0c;35岁开始学习编程语言是完全可以的。虽然说学习Python语言并…

css的再深入7(更新中···)

1.transparent 透明的 2.placeholder 提示语 写页面 搞清结构层次&#xff0c;保证模块化&#xff0c;让他们之间不能受到影响 (1) 元素性质 (2) 标准流 浮动带来的脱离文档流撑不起父级的高度的问题可以采用清除浮动的方式消除影响&#xff0c;absolute和fixed带来的脱…

窥探JBoss Fuse 6.1的新功能

我对即将发布的Fuse 6.1版本感到非常兴奋&#xff0c;因为有很多很棒的新功能是我真正想要的&#xff0c;而且已经有一段时间了。 HAWT工具。 因此&#xff0c;这是一个快速的先睹为快&#xff0c;主要关注于新版本的Fuse Management Console&#xff08;现已由hawtio开源项目…

[C语言] 选择排序之直接选择排序的特性及实现

[C语言] 选择排序之直接选择排序的特性及实现 1、算法特性 直接选择是一种简单、不稳定的选择排序方法&#xff0c;属于最为基础的排序方法之一。 其时间复杂度最好情况为O&#xff08;n&#xff09;、最差为O&#xff08;n&#xff09;、平均为O&#xff08;n&#xff09;&…

ubuntu 14.04 java_Ubuntu14.04下配置Java环境

Java环境配置网上已经有很多资料了&#xff0c;不过大多不适合初学者&#xff0c;Linux菜鸟更是不知所措了。。。Ubuntu14.04下配置Java环境&#xff0c;具体方案如下&#xff1a;Oracle官网上下载“jdk-8-linux-i586.tar.gz”和“jre-8-linux-i586.tar.gz”&#xff0c;放置于…

电脑测速软件_联通你我【宽带提速】让网速飞!超实用的宽带测速提速攻略来啦!...

宅在家里&#xff0c;在家娱乐、在家办公、在家上课&#xff0c;都需要畅快的宽带网络&#xff0c;所以很多小伙伴都办理了联通宽带怎样才是正确的宽带测速姿势&#xff1f;小沃给大家介绍两种简便的测速方法&#xff0c;同时说说怎样才能完全释放宽带网速、让咱享受到真正的提…

MyEclipse - 查询使用的JDK版本

查询 MyEclipse 使用的 JDK 版本 MyEclipse 菜单->Windows->Proferences->java->Installs Jres重新设置JDK路径&#xff0c;改为开发程序时的JDK版本&#xff08;如上图&#xff09;&#xff08;我做到这一步就可以了&#xff01;我的eclipse是7.0&#xff0c;jdk…

解析什么是绝对定位,相对定位与浮动

在理解定位之前&#xff0c;先说一个概念&#xff0c;文档普通流&#xff0c;就是元素标签正常在HTML里的顺序&#xff0c;块级元素从上至下排列&#xff0c;行内元素从左到右排列。 绝对定位 绝对定位&#xff1a;absolute&#xff0c;元素相对于离它最近的已定位祖先元素进…