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种.默认的复选框的样式十分不好看,该效果将复选框加一美化,带上了一些动画效果,其中一些制作为滑动按钮的样式. 使 ...
最新文章
- Struts2和SpringMVC简单配置以及区别总结
- 【怎样写代码】工厂三兄弟之工厂方法模式(一):问题案例
- shell脚本学习之参数传递
- 人类血液中首次发现微塑料颗粒,饮料瓶塑料袋化妆品都是来源
- MPLS标签分发、通告及管理方式
- hive能替代oracle_173-Hive
- .NET Framework总结二
- QT每日一练day19:设计一个记事本
- 如何卸载电脑oracle,如何完整的卸载ORACLE -电脑资料
- html超链接去虾线,熟虾怎么去虾线?熟虾去虾线方法介绍
- Hadoop完全分布式集群安装Hbase
- 安装双系统后无法进入第二系统
- 飞机上一旅客突然收到生日蛋糕,是个小惊喜
- 17082 两个有序数序列中找第k小(优先做)
- 宏观经济判断指标-GDP、CPI、PPI、PMI
- 简单的Charles抓包ios微信网页
- 计算机屏幕显示电缆借口,电脑打不开,显示电缆线没有连接是什么意思?
- Python 制作藏头诗生成器(超详细)
- 陈敏 Java课设实验报告
- Pandas Dataframe 新增加一行