如何利用添加伪元素的办法自定义checkbox以及radio选框的样式

摘要:
这里我以复选框为例(与收音机相同)。上图是默认样式。这是我修改为直接进入主题的样式。首先,在vs中输入上述代码,然后键入输入框。类型为复选框,然后写入标签。将复选框的ID值指定给for属性。让两者产生联系。当我们单击标签中的内容时,您可以选中复选框,然后我们为标签创建一个伪元素。设置后,我们得到下图。现在,当我们单击时,没有

如何利用添加伪元素的办法自定义checkbox以及radio选框的样式第1张如何利用添加伪元素的办法自定义checkbox以及radio选框的样式第2张

这里我以checkbox举例(radio同理),上图为默认样式

如何利用添加伪元素的办法自定义checkbox以及radio选框的样式第3张如何利用添加伪元素的办法自定义checkbox以及radio选框的样式第4张

这是我修改之后的样式

直接进入主题吧

如何利用添加伪元素的办法自定义checkbox以及radio选框的样式第5张

首先在我们的vs里面输入如上代码

键入一个input框,类型为checkbox

再写一个label,给for属性赋予checkbox的ID值,让两个产生联动

这样,我们点击label里面的内容的时候,可以让checkbox选中

然后我们给label新建一个伪元素

如何利用添加伪元素的办法自定义checkbox以及radio选框的样式第6张

设置好之后我们得到如下样子

如何利用添加伪元素的办法自定义checkbox以及radio选框的样式第7张

现在我们点的时候是没有任何变化的,因为我们并没有设置点击之后的样式

我们输入以下代码

如何利用添加伪元素的办法自定义checkbox以及radio选框的样式第8张

为了使我们的选择器能选中label下的伪元素,我们需要调整代码

如何利用添加伪元素的办法自定义checkbox以及radio选框的样式第9张

将label放在input之后,我们的选择器就能选中label下的伪元素了

这样我们实现了用伪元素自定义样式,这样的做的好处就是我们可以改变checkox和radio的颜色

不至于使用默认的样子

例如以下

如何利用添加伪元素的办法自定义checkbox以及radio选框的样式第10张如何利用添加伪元素的办法自定义checkbox以及radio选框的样式第11张如何利用添加伪元素的办法自定义checkbox以及radio选框的样式第12张如何利用添加伪元素的办法自定义checkbox以及radio选框的样式第13张如何利用添加伪元素的办法自定义checkbox以及radio选框的样式第14张如何利用添加伪元素的办法自定义checkbox以及radio选框的样式第15张如何利用添加伪元素的办法自定义checkbox以及radio选框的样式第16张

大家可以来try一try哦~~~~~~~~~~~~~

免责声明:文章转载自《如何利用添加伪元素的办法自定义checkbox以及radio选框的样式》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇WPF MVVM模式Flask web开发之路七下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

uboot的relocation原理详细分析

转自:http://blog.csdn.net/skyflying2012/article/details/37660265 最近在一直在做uboot的移植工作,uboot中有很多值得学习的东西,之前总结过uboot的启动流程,但uboot一个非常核心的功能没有仔细研究,就是uboot的relocation功能。 这几天研究下uboot的reloca...

设置textView或者label的行间距方法

一,效果图。 二,代码。 1 RootViewController.m 2 3 4 5 - (void)viewDidLoad 6 7 { 8 9 [super viewDidLoad]; 10 11 //Do any additional setup after loading the view. 12...

PyQt5设置图片格式及动画

1、缩放图片'''使用QImage.Scale(width,height)方法可以来设置图片'''from PyQt5.QtCore import *from PyQt5.QtGui import *from PyQt5.QtWidgets import *import sysclass scaleimage(QWidget): def __ini...

使用matplotlib画出log的图像

以下内容是学习笔记,若有侵权,立即删除! import math import matplotlib.pyplot as plt import numpy as np if __name__ == '__main__': #获得浮点类型numpy数组 x = np.arange(0.05,3,0.05) #获得函数结果 y1...

Spring Boot + Spring Cloud 实现权限管理系统 配置中心(Config、Bus)

技术背景 如今微服务架构盛行,在分布式系统中,项目日益庞大,子项目日益增多,每个项目都散落着各种配置文件,且随着服务的增加而不断增多。此时,往往某一个基础服务信息变更,都会导致一系列服务的更新和重启,运维也是苦不堪言,而且还很容易出错。于是,配置中心便由此应运而生了。 目前市面上开源的配置中心有很多,像Spring家族的Spring Cloud Confi...

Jxl操作Excel设置背景、字体颜色、对齐方式、列的宽度(转)

原文出处:http://zhouhaitao.iteye.com/blog/1842769 最近项目中需要用到导出Excel文件,以下是我写了一个通过jxl操作Excel的例子,熟悉Jxl的使用。 有一个比较难以处理的问题就是自动适应文本宽度的问题。 以下我也在网上找了一下 :有如下的方式处理: CellView cellView = new CellVi...