<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>checkbox</title>

    <style>

        .checkbox input {

            display: none;

        }

        .checkbox input+label {

            background: url(./checkbox1.png) left center no-repeat;

            background-size: 20px 20px;

            padding-left: 20px;

        }

        .checkbox input:checked+label {

            background-image: url(./checkbox2.png);

        }

    </style>

</head>

<body>

    <div class="checkbox">

        <input type="checkbox" checked id="music" />

        <label for="music">音乐</label>

        <input type="checkbox" id="sport" />

        <label for="sport">运动</label>

    </div>

</body>

</html>

纯css实现checkbox样式改变的更多相关文章

  1. 纯css实现checkbox开关切换按钮

    我们都知道 checkbox 标签默认样式 实在是太low了,故对CheckBox美化很有必要. 现提供两种方式对其进行美化. 方法一 <div class="switch-wrap ...

  2. 转 纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  3. 【转】纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  4. 纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  5. CSS控制checkbox样式

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

  6. 纯CSS打造BiliBili样式博客主题

    前言 一直以来,我都在思考如何减少不必要的JS代码,仅通过CSS来实现博客园主题美化.CSS有很多魔法代码,例如:before,iconfont,order,等等,利用好这些技巧,也能实现很好美化效果 ...

  7. 纯CSS修改checkbox复选框样式-02

    我有用过这个纯修改input属性的 本人修改后的代码和效果图(修的不好), 这个是改动最简单的: css代码 input[type=checkbox]{ visibility: hidden; } i ...

  8. 纯CSS修改checkbox复选框样式

    借鉴网友博客, 改用后整理收录 效果图: 移入: <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

  9. 利用纯CSS美化checkbox和radio和滑动按钮的实现

    W3C提供的CheckBox和radio的原始样式非常的丑,而且在不同的额浏览器表现还不一样,使用常规的方法添加样式没法进行修改样式 一, 单选按钮 <html> <head> ...

随机推荐

  1. git 本地代码 切换远程分支

    公司之前代码使用的是gitlab,后来换成腾讯的工峰,所以需要切换远程不支,所以在原代码上切换即可. 在原项目打开git bash命令,打开后会显示本地的原始分支 打开后 添加新的远程分支,红色字体为 ...

  2. Java面试题_第三阶段(Spring、MVC、IOC、AOP、DI、MyBatis、SSM、struts2)

    1.1 何为Spring Bean容器?Spring Bean容器与Spring IOC 容器有什么不同吗? 答:1)用于创建bean对象,管理bean对象的那个容器. 2)Spring IOC 容器 ...

  3. uiautomatorviewer提示Unable to connect to adb. Check if adb is installed correctly解决方法

    转自:https://www.jianshu.com/p/c8581a70d1bc 解决方案: 1.打开  "E:\android-sdk_r24.4.1-windows\android-s ...

  4. Redis学习（二）Redis的安装

    Window 下安装 下载地址:https://github.com/MSOpenTech/redis/releases. Redis 支持 32 位和 64 位.这个需要根据你系统平台的实际情况选择 ...

  5. 基于H7的串口WIFI模块ESP8266的TCP客户端例子和操作说明（AP兼STA模式）

    说明: 1.如果不熟悉网络的话,等我这几天更新V7用户手册的ESP8266章节,如果熟悉的话,直接操作即可,这里将操作说明发出来. 2.串口WIFI是采用的AT指令操作,简单易用,指令手册在这个帖子里 ...

  6. webpack动态加载打包chunk命名

    最近,遇到复杂h5页面开发,为了优化H5首屏加载速度,想到使用按需加载的方式,减少首次加载的JavaScript文件体积,于是将处理过程在这里记录一下,涉及到的主要是以下三点: 使用Webpack如何 ...

  7. rsync高级同步工具

    1.什么是rsync rsync 是一款开源的.快速的.多功能的.可实现全量及增量的本地或远程数据同步备份的优秀工具,rsync软件使用于 unix/linux/windows等多种操作系统平台. 2 ...

  8. Java题库——Chapter15 事件驱动编程和动画

    Chapter 15 Event-Driven Programming and Animations Section 15.2 Events and Event Sources1.    A Java ...

  9. asp.net core的AOP记录

    序曲:学习编程最好的方式就是敲代码,没有比这个更好的方法,哪怕你看了上百G的视频,都不如你自己敲几行代码更为有效.还有要记得敲完代码然后写一篇随笔来记录一下你所学所想. 什么叫AOP? AOP面向切面 ...

  10. CAD怎么算面积?这种方法你要知道

    在CAD中,打开可能都是用过CAD制图软件,这是一个比较强大的绘图软件,可以绘制出各种类型的CAD图纸文件,还可以将绘制好的图纸面积进行测量.那CAD怎么算面积?其实计算面积的方法有很多中,下面给大家 ...