用css实现原生form中radio单选框和input输入框的hover样式以及聚焦focus的样式

一.问题描述:用css实现原生form中radio单选框和input的hover已经focus的样式

在实际的开发中,一般公司ui都会给效果图,比如单选按钮radio样式,input输入框hover的时候样式,以及focus的时候样式,等等,今天我们就来实现下

二.实现方法

设置单选框颜色:
.comItem .content input[type="radio"] {accent-color: #D9262C;
}设置hover颜色:
input:hover {border-color: #DF464B;
}
和focus的颜色
input:focus {border-color: #DF464B;
}

三:实现效果图

好啦  已经完成啦,大家可以相互讨论学习额!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/159367.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Ubuntu安装PCAN-View

目录 一. Hardware 二. Software 2.1 安装驱动 2.2 安装PCAN-View QA 本文介绍如何安装linux版的PCAN-View。 PCAN-View:用来抓包分析CAN/CANFD报文。Hardware: PEAK-System Linux generic #37~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Mon Oct 9 15:34:04 UTC 2…

Java 最简单的实现 AES 加密和解密

AES简介 AES(Advanced Encryption Standard)高级加密标准,是一种被广泛使用的对称加密算法,用于加密和解密数据。它曾经是美国政府的一个机密标准,但现在已成为公开的加密算法,并被广泛使用于商业、政府及…

第四代智能井盖传感器:智能井盖位移监测

当城市道路上的井盖出现异常时,可能会导致突发的交通事故或人员受伤事件。而传统的井盖监测往往依靠人力进行巡查,这种方式可能会因为监测不及时或不准确而带来问题。但是现在有了智能井盖传感器,它们成为了城市地下生命线的守护者。这种智能…

【开源】基于Vue.js的开放实验室管理系统的设计和实现

项目编号: S 013 ,文末获取源码。 \color{red}{项目编号:S013,文末获取源码。} 项目编号:S013,文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容2.1 实验室类型模块2.2 实验室模块2.3 实…

净利降4成、股价腰斩,戎美困在“淘系女装第一股”

今年的“双11”静悄悄。 作为“淘系女装第一股”,戎美却拒绝参加“双11”。 戎美作为一家淘宝女装店,喊出“从不打折,从不参加任何促销”的口号;尽管戎美采取独特的营销策略,但其业绩承压困局也写在最新的三季报里。…

【用unity实现100个游戏之16】Unity程序化生成随机2D地牢游戏3(附项目源码)

文章目录 先本文看看最终效果前言二叉空间分割算法房间优先生成使用走廊连接各个房间BSP和随机游走源码完结 先本文看看最终效果 前言 前两期我们使用了随机游走算法已经实现了地牢的生成,本期再说另外一种生成地牢的方法,使用二叉空间分割算法&#xf…

【机器学习】039_合理初始化

一、稳定训练 目标:使梯度值在更合理的范围内 常见方法如下: 将乘法变为加法 ResNet:当层数较多时,会加入一些加法进去 LSTM:如果时序序列较长时,把一些对时序的乘法做加法 归一化 梯度归一化&…

【面试HOT300】滑动窗口篇

系列综述: 💞目的:本系列是个人整理为了秋招面试的,整理期间苛求每个知识点,平衡理解简易度与深入程度。 🥰来源:材料主要源于【CodeTopHot300】进行的,每个知识点的修正和深入主要参…

01【SpringBoot快速入门、yml语法、自动配置、整合框架】

目录 一、SpringBoot简介 1.1 Spring优缺点 1.1.1 Spring的优点 1.1.2 Spring的缺点 1.2 SpringBoot的概述 1.2.1 SpringBoot概述 1.2.2 SpringBoot的核心功能 二、SpringBoot快速入门 2.1 创建Maven工程 2.2 添加起步依赖 2.3 编写Controller 2.4 编写SpringBoot引…

易点易动设备管理系统:提升企业设备保养效率的最佳选择

在现代企业中,设备的正常运行和保养对于业务的顺利进行至关重要。然而,传统的手动设备管理方式往往效率低下、容易出错,给企业带来不必要的成本和风险。为了解决这一问题,易点易动设备管理系统应运而生。本文将介绍易点易动设备管…

No such module ‘FacebookCore‘

在下面的地方添加这个库

常用的工作资料怎么在电脑上记录呢?

在现代工作中,我们经常需要记录各种各样的工作资料,例如会议记录、项目计划、待办事项等等。传统的纸质笔记本虽然方便携带,但难以整理和检索。而在电脑上直接记录常用的工作资料,在记录、整理、查看、使用等方面都是更为高效、便…

C++ MiniZip实现目录压缩与解压

Zlib是一个开源的数据压缩库,提供了一种通用的数据压缩和解压缩算法。它最初由Jean-Loup Gailly和Mark Adler开发,旨在成为一个高效、轻量级的压缩库,其被广泛应用于许多领域,包括网络通信、文件压缩、数据库系统等。其压缩算法是…

超详细 | 实验室linux服务器非root账号 | 安装pip | 安装conda

登录实验室公用服务器,个人账号下(非root)是空的,啥也没有,想安装下pip和conda。 转了一圈,好像没太有针对这个需求写具体博客的,但有挺多讲直接在root下安的(用的应该是个人虚拟机&…

透视未来:现代发电厂地区可视化与智慧能源的结合

随着全球能源消费的不断增长,电力需求也在不断上升。作为能源行业的重要组成部分,现代发电厂扮演着不可替代的角色。而现代发电厂的数据管理和监控系统,则是确保其安全、高效、稳定运行的重要手段。在这个背景下,现代发电厂地区可…

Missing file libarclite_iphoneos.a 问题解决方案

问题 在Xcode 运行项目会报以下错误 File not found: /Applications/Xcode-beta.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/lib/arc/libarclite_iphoneos.a解决方案 打开URL https://github.com/kamyarelyasi/Libarclite-Files ,下载liba…

3.11-容器的资源限制

这一小节我们来看一下如何限制容器的资源,比如CPU和内存。 我们先来看一下对内存的限制。 --memory和--memory-swap这两个参数,如果我们只限定了--memory,没有限定--memory-swap,那么--memory-swap的大小就会和--memory大小一样。…

python练习题(markdown中的60道题)

1.Demo01 摄氏温度转化为华氏温度 celsius float(input(输入摄氏温度:)) fahrenheit (9/5)*celsius 32 print(%0.1f 摄氏温度转为华氏温度为 %0.1f % (celsius, fahrenheit))结果: 2.Demo02 计算圆柱体的体积 h, r map(float, input().split())# …

echarts实现如下图功能代码

这里写自定义目录标题 const option {tooltip: {trigger: axis},legend: {left: "-1px",top:15px,type: "scroll",icon:rect,data: [{name:1, textStyle:{color: theme?"#E5EAF3":#303133,fontSize:14}}, {name: 2, textStyle:{color: theme…

小程序泄露腾讯地图apikey

今天挖小程序时测了很久,一直没有头绪,后来想要测试一下支付漏洞,但是这里却出问题了 添加地址时我发现,当我添加一个地址时,他会显示腾讯地图的logo和一部分小图,那时候我就在想,既然这里可以调…