CheckBox、radio改变默认样式,自定义样式_我的大树的博客-程序员宅基地

技术标签: css  单选框  复选框  

在这里插入图片描述
input[type=“radio”] {
height: 22px;
width: 22px;
margin-right: 10px;
display: none;
}
input[type=“radio”] + label::before {
content: “\a0”; /不换行空格/
display: inline-block;
vertical-align: middle;
font-size: 18px;
width: 18px;
height: 18px;
margin-right: 10px;
border-radius: 50%;
border: 1px solid #cccccc;
background: #fff;
line-height: 22px;
box-sizing: border-box;
}
input[type=“radio”]:checked + label::before {
border: 1px solid #4285F4;
background-color: #4285F4;
background-clip: content-box;
padding: 3px;
}
/对号/
input[type=“checkbox”]{
width:14px;
height:14px;
display: inline-block;
text-align: center;
line-height: 18px;
position: relative;
vertical-align: text-top;
}
input[type=“checkbox”]::before{
content: “”;
position: absolute;
top: 0;left: 0;
background: #fff;
width: 100%;height: 100%;
border: 1px solid #dddddd;
}
input[type=“checkbox”]:checked::before{
content: “\2713”;
background-color: #4285F4;
position: absolute;
top: 0;left: 0;
width:100%;
border: 1px solid #dddddd;
color:white;
font-size: 17px;
font-weight: bold;
}在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_43033730/article/details/89325883

智能推荐

python去哪里学-杭州python编程入门去哪学?_weixin_37988176的博客-程序员宅基地

如今,人工智能诸多领域,都有涉及Python语言,它可以堪称火爆全球。据不完全统计,Python使用人数超过千万,30%IT新人入门都学Python技术。让很多人转行想加入Python编程语言的学习。python编程入门去哪学?大家还是要积极主动地去实地进行考察试学,只有这样,才能找到真正适合自己的Python编程入门学习学校。一家真正靠谱的学校应该有好的师资,应该有科学的安排,应该有真正靠谱的就...

一切皆可VR,长沙云图VR科技加速企业数字化转型!_weixin_46633568的博客-程序员宅基地

6月14日,第127届广交会在网上开幕.这是我国最古老的贸易展览会第一次被移到"阴云密布"的一面.不用离开家,来自世界各地的参展商和买家都可以谈论生意。 VR时代终于来了对于参加本次展览的参展商来说,最大的亮点是:随时在线业务。与之前的拥挤展览相比,这次您只需要进入展览页面,您可以看到数以万计的公司,数百万种产品以及24小时不间断的公司实时直播;可以说,对于这个"云计算业务"“广交会”,所有参展商也都绞尽脑汁,花了很多心思。为了不让客户对内容促销感到厌烦,特别制作了许多视频,以使客户获得更好的体验。

Mybatis入门学习笔记(二)_就是二二二二婷的博客-程序员宅基地

Mybatis入门学习笔记(二)1. Mybatis实现传统dao的开发2. mapper接口开发3. 输出结果 ResultMap3.1 junit 单元测试3.2 ResultMap4. 动态SQL1. Mybatis实现传统dao的开发先写一个dao层接口,然后再写一个实现类。传统dao开发上存在的问题:方法调用:字符串易出错,硬编码。2. mapper接口开发编写接口...

关于计算机班徽的设计大赛,班徽设计大赛最终结果出来了,快来凑热闹_蒋陈凡夫的博客-程序员宅基地

原标题:班徽设计大赛最终结果出来了,快来凑热闹班徽,指一个集体的象征。大到国家有国徽,小到学校有校徽,同样,一个班级也应该有一个象征---班徽。学生心理健康协会于2019年10月17日在八点十分在西阶一举办了班徽设计大赛,活动面向电信学院19级新生十九个班级。心协成员前期准备充分,活动现场人员爆满,活动氛围活跃。在比赛中,各班展示人员通过ppt展示,详细的解说了班徽的代表意义,设计灵感以及设计过程...

C语言5ms延时程序汇编,各种汇编延时程序大集合_weixin_39936388的博客-程序员宅基地

在论坛上看到不少不错的延时程序,整理如下共同分享:本文引用地址:http://www.eepw.com.cn/article/201611/321248.htm精确延时计算公式:延时时间=[(2*第一层循环+3)*第二层循环+3]*第三层循环+5;延时5秒左右DELAY5S:PUSH 04HPUSH 05HPUSH 06HMOV R4,#50DELAY5S_0:MOV R5,#200DELAY5S...

Linux下载安装之JDK_Michael_H_S_J的博客-程序员宅基地

以下安装系统基于Centos7安装JDK1.安装前检查自带 open-jdk命令:rpm -qa |grep javarpm -qa |grep jdkrpm -qa |grep gcj如无输出则表示没有自带JDK以安装jdk1.8为例2.查询java1.8列表yum list java-1.8*3.安装java1.8.0的所有文件找到想要安装的版本文件名称,如:java-...

随便推点

linux用户删除附加组,Linux gpasswd命令用法详解:把用户添加进组或从组中删除_认知能力训练的博客-程序员宅基地

为了避免系统管理员(root)太忙碌,无法及时管理群组,我们可以使用 gpasswd 命令给群组设置一个群组管理员,代替 root 完成将用户加入或移出群组的操作。gpasswd 命令的基本格式如下:[[email protected] ~]# gpasswd 选项 组名表 1 详细介绍了此命令提供的各种选项以及功能。表 1 gpasswd命令各选项及其功能选项功能选项为空时,表示给群组设置密码,仅 r...

Codeforces Gym100543L Outer space invaders 区间dp 动态规划_weixin_30443895的博客-程序员宅基地

原文链接https://www.cnblogs.com/zhouzhendong/p/CF-Gym100543L.html题目传送门 - CF-Gym100543L题意  $T$ 组数据。  有 $n$ 个外星人,第 $i$ 个外星人将在 $a_i$~$b_i$ 这段时间内出现,距离你 $d_i$ 。  任何时刻,你可以使用 $R$ 点能量将距离你不超过 $R$ 的所有外星人全...

PTC Onshape 的两个核心弱点_山涧果子的博客-程序员宅基地

关于 Onshape,我遇到了 PTC 的几个致命弱点。这两个弱点是 Onshape Onshape 所固有的。内核不兼容。在内核级别,Onshape 与 PTC 的 CAD 软件不兼容。 Onshape 运行 Parasolid(从主要竞争对手获得 PTC、Siemens 的许可),而 PTC 拥有自己的 Granite 几何建模内核。我想知道 Onshape 和 Creo 的配合效果如何;我还没有听说 PTC 解决了这个问题。当然,任何转换的缺点是数据可能会丢失,或者更糟的是,会损坏,因此当两个.

C++中lambda表达式的使用_vitaminYZZ的博客-程序员宅基地

C++中lambda表达式的使用lambda用法一:替代Binderlambda用起来比Binder更方便#include <iostream>int main(void){ auto plus10 = std::bind(std::plus<int>(), std::placeholders::_1, 10); std::cout <&l...

JavaSE学习笔记-Day11_Ring-My-Bells的博客-程序员宅基地

一. 异常机制程序在运行过程中很容易出现各种各样的问题,比方说:数组越界、除数为0、内存泄漏等等。Java为了有效解决和提示出现的相应问题,推出了异常机制(个人觉得准确的说是问题机制)。JDK 中定义了很多类用于构成这个机制(专业称呼这些类为异常类,不过这种说法不利于我的理解),这些类对应了各种各样可能出现的问题事件,所有这些类的对象都是派生于java.lang.Throwable类的一个实例...

java 插件11.45.2.14_java – IntelliJ 14 Lombok插件@Builder =错误_斜阳君的博客-程序员宅基地

我的IntelliJ 14和Lombok注释“@Builder”有问题.我有一些课:@[email protected] class TransactionFilter {private String name;private ProductType product;...public static TransactionFilterBuilder defaultBuilder() {Tra...

推荐文章

热门文章

相关标签