<!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. JS---案例：移动元素，封装动画函数

    案例:移动元素,封装动画函数 1. div要移动,要脱离文档流---position:absolute 2. 如果样式的代码是在style的标签中设置,外面是获取不到 3. 如果样式的代码是在styl ...

  2. Java多线程面试问答

    今天,我们将讨论Java 多线程面试问答. 线程是Java面试问题中的热门话题之一.在这里,我从面试的角度列出了大多数重要的Java多线程面试问题,但是您应该对Java线程有足够的知识来处理后续问题. ...

  3. 在Linux 中搭建 Mysql

    在本次搭建,出现了各种问题,一直解决不掉,建议各位小伙伴不要像我一样,像一个无头的苍蝇一样,这有问题就解决这个问题,没有意识本质实在的问题. 主要问题(加星,标重点):一定要看自己的linux 版本, ...

  4. IT兄弟连 HTML5教程 使用盒子模型的浮动布局

    虽然使用绝对定位可以实现页面布局,但由于调整某个盒子模型时其他盒子模型的位置并不会跟着改变,所以并不是布局的首选方式.而使用浮动的盒子模型可以向左或向右移动,直到它的外边缘碰到包含它的盒子模型边框或另 ...

  5. Appium+Java 自动化测试系列一：环境搭建

    Appium+Java 自动化测试框架搭建主要分为以下几个方面的下载安装及环境配置 1.Java开发环境 涉及到的内容又jdk.编译器工具(推荐jdk 1.8.Eclipse编译器或者IDEA编译工具 ...

  6. 通过requestAnimationFrame判断浏览器帧率

    /** ** 得到浏览器每秒帧数fps ** ** @Date Mar 13 2013 **/ var showFPS = (function(){ var requestAnimationFrame ...

  7. python网络编程：UDP方式传输数据

    UDP --- 用户数据报协议(User Datagram Protocol),是一个无连接的简单的面向数据报的运输层协议. UDP不提供可靠性,它只是把应用程序传给IP层的数据报发送出去,但是并不能 ...

  8. config-server-bus动态更新配置

    config-server用来搭建配置中心,而配置信息一般使用gitlab仓库来存储,这样在你的配置发生改变时,不需要从新打包,而如果使用native的试,则需要从新打一个config-server的 ...

  9. CSS之border绘制三角形

    用CSS的border可以画出高质量的三角形. 我们一般会这么使用border: #test-border { width: 100px; height: 100px; margin: 100px a ...

  10. 入职小白随笔之Android四大组件——内容提供器详解（Content Provider）

    Content Provider 内容提供器简介 内容提供器(Content Provider)主要用于在不同的应用程序之间 实现数据共享的功能,它提供了一套完整的机制,允许一个程序访问另一个程序中的 ...