input复选框checkbox默认样式纯css修改
修改之前的样式
修改之后的样式
html
<input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label>
css
input[type="checkbox"]{width:20px;height:20px;display: inline-block;text-align: center;vertical-align: middle; line-height: 18px;position: relative;}
input[type="checkbox"]::before{content: "";position: absolute;top: 0;left: 0;background: #fff;width: 100%;height: 100%;border: 1px solid #d9d9d9}
input[type="checkbox"]:checked::before{content: "\2713";background-color: #fff;position: absolute;top: 0;left: 0;width:100%;border: 1px solid #e50232;color:#e50232;font-size: 20px;font-weight: bold;}
“\2713”实体符号√ ;如有兴趣查看详细实体符号请点这里
选中的颜色可以在input[type="checkbox"]:checked::before里修改border-color及color就可以了
input复选框checkbox默认样式纯css修改相关推荐
- HTML复选框checkbox默认样式修改
此方法可以将复选框的默认样式替换成任意样式.如图: 未选择: 选择时: 思路:将复选框隐藏,利用lebal元素的焦点传递特性,用lebal的样式替代复选框. 代码如下: <!DOCTYPE ht ...
- 改变复选框的默认样式,将其变成圆形,背景色为绿色
我们经常使用input复选框,它有自己的默认样式,很多时候,为了使页面更美观,我们需要修改复选框的样式.通常使用的修改方式有两种,一个是链入图片,另一个是使用纯css的方法进行修改.如果事先有设计好的 ...
- 复选框checkbox自定义样式
纯CSS实现复选框自定义样式 1.去掉默认样式 2.第一种方式:用图片实现 3.第二种方式:用字体图标实现 1.去掉默认样式 input[type=checkbox]{appearance:none; ...
- Android学习之复选框checkbox自定义样式以及调整图片大小
1.自定义样式: 下载复选框样式图:https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 图片重命名为英文(否则找不到)并 ...
- html改变复选框颜色,如何利用纯CSS改变html?radio/checkbox默认背景颜色样式
本篇文章给大家带来的内容是关于如何利用纯CSS改变html?radio/checkbox默认背景颜色样式,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS代码:input[typ ...
- css_input[checked]复选框去掉默认样式并添加新样式
效果对比: "\2713"实体符号√ :如有兴趣查看详细实体符号请点这里 代码实现: 1 <!DOCTYPE html> 2 <html> 3 4 < ...
- 使用CSS3美化复选框checkbox
我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那么本文将结合实例带您一起了解一下使用CSS3将复选框checkbox进行样式美化,并且带上超酷的滑动 ...
- CSS3重新定义input中呆若木鸡的默认复选框CheckBox和单选框Radio样式
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><style>/* ...
- html5复选框样式,11种炫酷CSS3复选框checkbox样式美化效果
这是一款效果非常酷的CSS3复选框checkbox样式美化效果.该复选框美化效果共有11种.默认的复选框的样式十分不好看,该效果将复选框加一美化,带上了一些动画效果,其中一些制作为滑动按钮的样式. 使 ...
最新文章
- 拉取远程分支_git使用教程之创建本地库并关联远程库(笔记整理篇一)
- 鸟哥的Linux私房菜(服务器)- 第六章、 Linux 网络侦错
- Andoid自定义View的OnMeasure详解和自定义属性
- [PHP] 近期接手現有的企邮前端框架业务所遇困难
- chromebook刷机_您可以购买的最好的Chromebook,2017年版
- sqlserver查看被锁表、解锁
- 2017c语言考核册答案,2017年电大《C语言程序设计》形成性考核册答案.doc
- python中一切数据都是对象吗_Python 对象中的数据类型
- DHCP安装授权与设置分配
- 《个体软件过程》—第1章1.3节个体软件过程
- Mac OS X搭建C#开发环境
- C++内置数组和array的比较
- 回顾 | Apache Flink 1.9 版本新特性强势预告!(内含PPT下载链接)
- mysql原生态查询java_java使用原生MySQL实现数据的增删改查
- jq UI-引入、拖动效果、api文档位置
- 成功三大定律:荷花定律、金蝉定律、竹子定律
- 计算机spec分值怎么算,四级怎么算分数公式(历年四级常模均值)
- 基于Open CV的植物图像分类识别项目
- 砂轮是刀具磨床加工表面粗糙度高的主要因素
- HTML5学习之WebSocket通讯(六)
热门文章
- vue 无法进入response拦截器_vue拦截器的一次实践
- php gridview,PHP编程:yii2-GridView在开发中常用的功能及技巧总结
- 理科卷math·english·chinese·biology·chemistry·physics
- 点分治经典_动态点分治
- 在NSUserDefaults中存储自定义类型的数据
- 转-Android Studio *.jar 与 *.aar 的生成与*.aar导入项目方法
- Azure开发者任务之一:解决Azure Storage Emulator初始化失败
- 计算几何相关资料+题目推荐(不定期补充)
- WEB效能测试和负载测试部分截图
- tf.clip_by_value()