css----实现checkbox图片切换

1、效果图

2、代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>checkbox</title><style type="text/css">label {width: 20px;font-size: 12px;cursor: pointer;}label i {display: inline-block;width: 18px;height: 16px;background-image: url("/imgs/tick-before.png");background-repeat: no-repeat;background-size: 18px 16px;}input[type="checkbox"],input[type="radio"] {display: none;}input[type="radio"]+i {border-radius: 7px;}input[type="checkbox"]:checked+i,input[type="radio"]:checked+i {background-image: url("/imgs/tick-after.png");}input {display: inline-block;width: 18px;height: 16px;background-image: url("/imgs/tick-before.png");background-size: 18px 16px;}</style>
</head><body><label><input type="checkbox" name="check-protocol" checked><i></i></label><span>我已阅读并完全接受服务协议</span>
</body>
</html>

3、总结

这里实现的核心是input[type='checkbox']:checked{}这属性，当checkbox被选中时的样式。（CSS3的UI选择器）

转载于:https://www.cnblogs.com/SunlikeLWL/p/7596685.html

css----实现checkbox图片切换相关推荐

CSS+jQuery/JavaScript图片切换播放
主要用到的是CSS样式控制和简单的Jquery逻辑控制. CSS:使得图片播放框的大小适合并固定,同时实现溢出隐藏,这样就可以使尚没应该播放的图片得以隐藏:另外,它还自定义手动切换按钮的效果. Jqu ...
css hover触发图片切换
今天弄一个图片切换,出了一些错误,网上也找了一下解决方法,所以来记录一下. 先看我简单写的css图片切换,然后再讲要注意的地方. <!DOCTYPE html> <html lang ...
html+css样式：图片切换-----立体旋转
示例如图 html如下: <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&q ...
HTML5+CSS3小实例：百叶窗图片切换效果
实例:百叶窗图片切换效果技术栈:HTML+CSS 效果: 源码: [html] <!DOCTYPE html> <html><head><meta http ...
html网页切换效果，css图片切换效果
<title>html网页切换效果,css图片切换效果</title><link rel="stylesheet" href="./fami ...
css实现的图片列表切换轮播特效html页面前端源码
大家好,今天给大家介绍一款, css实现的图片列表切换轮播特效html页面前端源码(图1).送给大家哦,获取方式在本文末尾. 图1 特效非常炫酷,可以用于制造音乐播放切换或视频播放切换前端(图2) 图 ...
css 图片切换模版
(1)淘宝网4种JS图片切换幻灯焦点图代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
html+css+jquery,html+css+js(+JQuery)制作扑克牌图片切换效果
先把静态页面写出来: index.html jquery制作扑克牌图片切换效果此时的效果是这样的: 分析: 背景颜色图片的位置图片的边框.圆角以及阴影让图片动起来 index.css代码: * ...
使用CSS实现简单的图片切换（轮播图）
使用CSS实现简单的图片切换(轮播图) 预览图如下: 目录使用CSS实现简单的图片切换(轮播图) 一:首先创建基本布局 1:创建一个div容器 ,里面的ul与ol标签分别对应轮播图片和下方圆点: 二 ...

css----实现checkbox图片切换

css----实现checkbox图片切换相关推荐

最新文章

热门文章