php checkbox美化,纯CSS3美化radio和checkbox_html/css_WEB-ITnose
如题,主要通过CSS3来实现将radio和checkbox美化的效果,但是兼容性并不是很好,PC端只支持chrome浏览器(IE和Firefox测试不行,其他没有更多测试)。然后微信端和QQ端访问也是正常。由于LZ所做的功能正好只需要在微信端展示,所以并未深入研究。
当然,虽然说不能兼容,但是对于为什么不能兼容还是需要解释一下的,其关键在于这么个选择器的问题:input[type=radio]:before。:beofre这个伪类选择器在主流浏览器中可以在P,span,div等标签插入一些式样,但是在input中就不行,索性chrome支持这一特性,而本实例也正是围绕着一特性进行开发。其他不多说,直接上代码和截图。
效果截图:
HTML代码:
Test for test1 Test for test2
check1 check2 check3 check4
然后再是CSS代码:
input[type=radio]{ font-size:1em; visibility: hidden; position: relative; display: inline-block; width: 1em; height: 1em; } input[type=radio]:before{ font-size:1em; top:12%; display: inline-block; position: absolute; content:' '; visibility: visible; height: 1em; width: 1em; display: block; background: url("../img/no.png") no-repeat; background-size: 1em 1em; } input[type=radio]:checked:before{ font-size:1em; content:' '; visibility: visible; height: 1em; width: 1em; background: url("../img/yes.png") no-repeat; background-size: 1em 1em; } input[type=checkbox]{ font-size:1em; visibility: hidden; position: relative; display: inline-block; width: 1em; height: 1em; } input[type=checkbox]:before{ top:12%; display: inline-block; position: absolute; content:' '; visibility: visible; height: 1em; width: 1em; display: block; background: url("../img/checkbox_no.png") no-repeat; background-size: 1em 1em; } input[type=checkbox]:checked:before{ content:' '; visibility: visible; height: 1em; width: 1em; background: url("../img/checkbox.png") no-repeat; background-size: 1em 1em; }
版权声明:本文为博主原创文章,未经博主允许不得转载。
本文原创发布php中文网,转载请注明出处,感谢您的尊重!
php checkbox美化,纯CSS3美化radio和checkbox_html/css_WEB-ITnose相关推荐
- 纯CSS3美化单选按钮radio
这种纯CSS3美化单选按钮radio的方法适用于以下情况: 1.可兼容IE9以上,需要兼容IE8的要写IE的hack把样式去掉 2.只支持单选按钮radio,因为单选按钮选中样式的圆圈可以用CSS做出 ...
- 纯CSS美化单复选框(checkbox、radio)
最重要的一点,隐藏选择框本身.不多说了,上代码: <!doctype html> <html> <head> <meta charset="utf- ...
- html复选框美化插件,js和css3超酷checkbox复选框美化插件
这是一款效果超超酷的js和css3 checkbox复选框美化插件.这个checkbox复选框美化插件最大的特点是可以拖动进行复选框的多选,当你选择一个复选框后,按住它往下拖动,下面的复选框也会被选择 ...
- html给radio添加图片,使用纯CSS自定义radio(单选框)和checkbox(多选框)的样式
radio和checkbox由于不同的浏览器显示的样式不一致,因此我们需要自定义radio(单选框)和checkbox(多选框)的样式.基本原理就是贱radio和checkbox的自定义样式设置成图片 ...
- 04-前端技术_CSS与CSS3美化页面
目录 二,CSS与CSS3美化页面 1,CSS简介 1.1 什么是CSS? 1.2 样式层叠次序 2,CSS基础语法 2.1 介绍 2.2 注释 3,CSS使用方式 3.1 如何插入样式表 3.2 外 ...
- css斑马线表格,用CSS3美化表格
CSS3美化表格 *{margin: 0;padding: 0;} body { padding: 40px 100px; } .demo { width: 600px; margin: 40px a ...
- html漂亮的单选框,纯css3实现漂亮的单选按钮radio
单选按钮radio是表单常见的元素,但是默认的单选按钮radio样式呆板不好看,因此通常设计人员会自己设计一个单选按钮radio,本文介绍用纯css3实现漂亮的单选按钮radio. 纯css3实现漂亮 ...
- Java学习-14 CSS与CSS3美化页面及网页布局
Java学习-14 CSS与CSS3美化页面及网页布局 1. CSS简介 什么是CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示控制 HTML 元素, ...
- 纯css美化滚动条样式
https://www.emperinter.info/2020/09/20/scrollbar-in-browser/ 自己完善自己博客再Ipad等移动端的菜单时选用了左右滑动的菜单模式!当然就会使 ...
最新文章
- prometheus监控_使用Prometheus和Grafana监视开放自由
- 【郭林专刊】过来人的总结
- 计算机网络与通信基础知识,计算机网络与通信基础/谢雨飞
- C#多线程开发-处理子线程中的异常
- 【做题记录】[NOIP2016 普及组] 魔法阵
- 人脸认证源码faceIdentify
- 香农信息熵之可怜的小猪
- QTCreator中字符编码问题以及WINDOWS API A/W两种版本的说明
- oracle的启动与关闭原理-数据路的分阶段启动
- [HNOI2016]树
- 基于情感词典的文本情感分析(一个最简单的举例能直接运行)
- VB脚本:快速入门教程
- OLED的字模提取(保姆级)---基于PCtoLCD2013
- 【供应链案例】解密可口可乐供应链管理策略,揭头部饮料企业成功之道
- NPN和PNP三极管收录笔记
- 超图申请试用以及激活
- 360浏览器中页面打开如何默认极速模式
- 取模 乘法和除法运算在CPU和GPU上的效率
- 关于“W: Possible missing firmware /lib/firmware/rtl_nic/rtl8168d-1.fw for module r8169”问题的解决
- 华为云微认证考试简介
热门文章
- 商汤涨涨涨涨:上市4日股价累涨130%,市值一度3000亿港元
- 替代离线RL?Transformer进军决策领域,「序列建模」成关键
- 指针都没搞懂,还能算得上 C++ 老司机?
- 一张图看懂中科大、国科大、中科院、社科院、上科大之间的关系
- Nginx源码分析:惊群处理与负载均衡
- Django源码分析8:单元测试test命令浅析
- 百面机器学习之经典算法
- python 获取你电脑纯文本文档内容!解决IndentationError: expected an indented block报错!
- 技术07期:图计算,让数据间的关系无处可藏【社区分切篇】
- 正确debug的TensorFlow的姿势