纯css自定义优化checkbox和radio标签
网页开发中经常用到checkbox(复选框)和radio(单选框),由于浏览器自带样式比较不美观,而且不同浏览器样式也不经相同,如果想要在不同浏览器都显示效果相同,就必须重置他们的样式!
这里介绍利用纯css对复选框和单选框进行修改的方法,当然大家也可以尝试用js的方法修改,利用纯css存在兼容问题,在IE9及以上才能正常显示,支持谷歌、火狐等主流浏览器。
实现原理:添加一个label标签,然后在标签里添加input和一个span标签,默认然input标签隐藏,span做成checkbox或radio样式(加载图片),然后利用:checked伪类选择器控制按钮是否选中,选中需要切换下span的图片。
HTML代码:
复选框
<label> <input type="checkbox"><span class="style"></span>英特网络Check </label> <label> <input type="checkbox"><span class="style"></span>英特网络Check </label>
单选框
<label> <input type="radio" name="bd"><span></span>英特网络radio </label> <label> <input type="radio" name="bd" checked=""><span></span>英特网络radio </label>
CSS代码
/*复选框(多选框)的美化CSS*/
input[type="checkbox"]{appearance: none; -webkit-appearance: none;outline: none;display:none} label{display:inline-block;cursor:pointer;} input[type="checkbox"]+span{width:16px;height:16px;display:inline-block;background:url(radio.png) no-repeat;background-position:0 0;background-size:16px 32px;} input[type="checkbox"]:checked + span{background-position:0 -16px} /*单选框的美化CSS*/ input[type="radio"]{appearance: none; -webkit-appearance: none;outline: none;display:none} label{display:inline-block;cursor:pointer;} input[type="radio"] + span{width:16px;height:16px;display:inline-block;background:url(radio.png) no-repeat;background-size:16px 32px;background-position:0px -16px;} label input[type="radio"]:checked + span{background-position:0 0}
这样就可以实现对checkbox和radio的优化!
实际使用时可以自行修改图片,来达到自己想要的效果;在手机端开发时,该效果均可以正常显示,但是由于手机端像素比的问题,图片容易虚化,需要将图片比在pc端的像素至少2倍以上,同时建议将选中和未选中分别放在一张图中,减少很多因像素比引起的其他问题。
效果演示:www.intewl.com/demo/ui/radiocheck/index.html
代码下载:https://pan.baidu.com/s/1UqYw4jmUK_XZodcQnXY7fQ
897浏览量 · 0评论 · 2018-11-08 10:21:30
热门专题
-
01
前端 / HTML超文本标记语言,标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。 超文本标记语言的结构包括“头”部分
13 篇文章
-
02
前端 / JS/JQjQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。
31 篇文章
-
03
前端 / CSS层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
15 篇文章
-
04
前端 / VUE Vue是一套构建用户界面的渐进式框架。 Vue只关注视图层,采用自底向上增量开发的设计。
41 篇文章
-
05
设计 / PhotoshopPhotoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具,可以有效地进行图片编辑工作。
0 篇文章
-
06
后端 / PHPPHP,一个嵌套的缩写名称,是英文超级文本预处理语言(PHP:Hypertext Preprocessor)的缩写。PHP 是一种 HTML 内嵌式的语言
0 篇文章
-
07
设计 / aihtml是超文本标记语言
0 篇文章
-
08
后端 / ThinkPhpThinkPHP是为了简化企业级应用开发和敏捷WEB应用开发而诞生的。遵循Apache2开源协议发布。简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。
5 篇文章
-
09
前端 / 微信小程序微信小程序,简称小程序,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。
3 篇文章
-
10
办公 / WordWord 提供了许多易于使用的文档创建工具,同时也提供了丰富的功能集供创建复杂的文档使用。
2 篇文章
全部评论 0