1、CSS

body{font-family:'微软简行楷'}
ul li{list-style:none; margin:10px;color:#4985d7;}
.myCheck { display: none; }
.myCheck + label { background-color: white; border: 1px solid #d3d3d3; width: 20px; height: 20px; display: inline-block; text-align: center; vertical-align: middle; line-height: 20px; margin-right: 5px; }
.myCheck:checked + label { background-color: #eee; }
.myCheck:checked + label:after { content: "\2714"; }

2、HTML

ul class="cleanfloat">
<li><input type="checkbox" class="myCheck" checked="checked" id="ck1"><label for="ck1"></label>123</li>
<li><input type="checkbox" class="myCheck" id="ck2"><label for="ck2"></label>345</li>
<li><input type="checkbox" class="myCheck" checked="checked" id="ck3"><label for="ck3"></label>123</li>
<li><input type="checkbox" class="myCheck" id="ck4"><label for="ck4"></label>34-CSDN</li>
<li><input type="checkbox" class="myCheck" checked="checked" id="ck5"><label for="ck5"></label>123-checkbox</li>
<li><input type="checkbox" class="myCheck" id="ck6"><label for="ck6"></label>345</li>
</ul>

  

css的checkbox样式变化的更多相关文章

  1. CSS控制checkbox样式

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

  2. css重写checkbox样式

    一.前言 默认的checkbox长这样: <p> <span><input type="checkbox" /></span> &l ...

  3. 纯css实现checkbox样式改变

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  4. 用css改变默认的checkbox样式

    自己常用的改变checkbox样式的两个方法: 一.利用background用图片代替checkbox效果 缺点:你首先得有一张好看的图片 优点:浏览器兼容性好 <!doctype html&g ...

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

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

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

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

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

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

  8. 使用CSS实现自定义input[checkbox]样式

    思路:使用label上的for熟悉,与checkbox上的id相对应来达到点击选中效果,在使用伪元素,或者其他元素,定位至checkbox上方,替代checkbox,并且隐藏checkbox,使用CS ...

  9. Jquery+CSS在不使用Checked的情况下实现当前选中行样式变化

    之前在做一个当前选中行样式变化时发现网上很多方法都是利用在行内添加checked,然后通过checked是否选中来判断当前选中行的位置,今天就整理了一个不需要在行内添加其他按钮直接通过变化当前选中行的 ...

随机推荐

  1. [ZOJ2341]Reactor Cooling解题报告|带上下界的网络流|无源汇的可行流

    Reactor Cooling The terrorist group leaded by a well known international terrorist Ben Bladen is bul ...

  2. bzoj 1191 匈牙利算法

    只需要做一遍匈牙利,只要有一个没法匹配上就break就行了 /************************************************************** Proble ...

  3. MongoDB简介以及下载安装

    什么是MongoDB ? MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统.运行稳定,性能高 在高负载的情况下,添加更多的节点,可以保证服务器性能. MongoDB 旨在 ...

  4. wx.ScrolledWindow wx.PseudoDC

    # encoding: utf-8 import logging import random import wx import wx.lib.inspection def GetMyBitmap(): ...

  5. snakes

    原地址 讨论区 Changing 算法一 我会随机! 由于我忘了设置多组数据,期望得分0至100. 算法二 我会模拟! 复杂度\(O(t^2)\),期望得分60. 但是很多人忘记题目给出的是环形-- ...

  6. DRF基类APIView提供的Request、Response和序列化器的综合使用

    关于DRF基类APIView提供的Request和Response对象的作用,可以看我的另一篇博文:https://www.cnblogs.com/chichung/p/9939864.html 综合 ...

  7. 《Java编程思想》笔记 第六章 访问权限控制

    1.编译单元 一个 编译单元即 .java 文件 内只能有一个 public 类  且该文件名必须与public 类名 完全一致. 编译单元内也可以没有public类 文件名可随意. 2. 包:库单元 ...

  8. getRequestDispatcher

    request.getRequestDispatcher("/xx/xx.jsp").forward( request, response); http://blog.csdn.n ...

  9. python常用内置函数整理

    1.最常见的内置函数是print print("Hello World!") 2.数学运算 abs(-5) # 取绝对值,也就是5 round(2.6) # 四舍五入取整,也就是3 ...

  10. Go简单的Goroutine示例

    最简单的,接下来,会是竞争,加锁... package main import ( "fmt" "runtime" "sync" ) var ...