css的checkbox样式变化
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样式变化的更多相关文章
- CSS控制checkbox样式
原文地址:http://www.xiumu.org/technology/style-checkboxes-with-css.shtml#comments Checkbox复选框是一个可能每一个网站都 ...
- css重写checkbox样式
一.前言 默认的checkbox长这样: <p> <span><input type="checkbox" /></span> &l ...
- 纯css实现checkbox样式改变
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- 用css改变默认的checkbox样式
自己常用的改变checkbox样式的两个方法: 一.利用background用图片代替checkbox效果 缺点:你首先得有一张好看的图片 优点:浏览器兼容性好 <!doctype html&g ...
- 转 纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
- 【转】纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
- 纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
- 使用CSS实现自定义input[checkbox]样式
思路:使用label上的for熟悉,与checkbox上的id相对应来达到点击选中效果,在使用伪元素,或者其他元素,定位至checkbox上方,替代checkbox,并且隐藏checkbox,使用CS ...
- Jquery+CSS在不使用Checked的情况下实现当前选中行样式变化
之前在做一个当前选中行样式变化时发现网上很多方法都是利用在行内添加checked,然后通过checked是否选中来判断当前选中行的位置,今天就整理了一个不需要在行内添加其他按钮直接通过变化当前选中行的 ...
随机推荐
- 关于dlib人脸对比,人脸识别
人脸检测 人脸特征点提取 人脸对比,等于两张人脸对比,识别 封装的所有识别函数,直接看下面调用就好了. # coding:utf-8 ''' 本本次封装,我主要是做两张人脸对比. 就只人脸识别部分,简 ...
- date "+Y-%m-%d %H:%M"
date "+Y-%m-%d %H:%M" date | awk '{print "Year:"$6 "\t month:"$2 ...
- 【MT8382/8121】为MTK的工厂测试添加测试项
摘要: 本文介绍添加MTK工厂测试项的步骤及调试技巧. 纲要: 1. 描述添加MTK工厂测试项的步骤 2.调试小技巧 1. 描述添加MTK工厂测试项的步骤 以添加红外测试为例: 1. mediatek ...
- Linux下查看使用的是哪种shell的方法汇总【转】
转自:http://www.jb51.net/LINUXjishu/247797.html 查看当前发行版可以使用的shell 复制代码 代码如下: [root@localhost ~]$ cat / ...
- linux下bus、devices和platform的基础模型 【转】
转自:http://blog.chinaunix.net/uid-20672257-id-3147337.html 一.kobject的定义:kobject是Linux2.6引入的设备管理机制,在内核 ...
- Oracle基础 12 对象 objects 同义词/序列/试图/索引
--创建同义词create public synonym employees for hr.employees; --公共同义词需要 create public synonym 权限 表的所有用户授 ...
- 肢解 HTTP 服务器构建
更好阅读请戳 这里 1. 最简单的 http 服务器 // server.js var http = require("http"); http.createServer(func ...
- 键盘焦点和逻辑焦点(Logic Focus与Keyboard Focus )
键盘焦点和逻辑焦点(Logic Focus与Keyboard Focus ) 1.定义Keyboard Focus可以理解为物理焦点.就是整个桌面上可以响应键盘输入的地方,整个桌面在某个时刻只可能有一 ...
- Delphi New,Getmem,ReallocMem联系与区别
来自:http://www.cnblogs.com/jsrgren/archive/2011/10/31/2270353.html ---------------------------------- ...
- seneca的一段代码(原创)
var seneca=require('seneca')() seneca.add({cmd:'wordcount'},function(msg,respond){ var length=0; if( ...