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

news2024/9/21 0:40:47

一.问题描述:用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.coloradmin.cn/o/1238408.html

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

相关文章

有哪些好用的CFD软件?怎么选?

ANSYS Fluent和COMSOL Multiphysics以及OpenFOAM这3款CFD软件哪个好?cfd软件中哪款最实用?cfd软件有哪些?今天就给大家带来这几款CFD软件对比分析,一起来看看吧。 ANSYS Fluent ANSYS Fluent 是一种流行的计算流体动力学 (CFD) …

时态图根据时间轴动态播放热力图

效果图如下&#xff1a; <!DOCTYPE html> <html><head><title>时态图</title><meta charset"utf-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><!-- 引入样式 --&g…

用于 syslog 收集的协议:TCP、UDP、RELP

系统日志是从 Linux/Unix 设备和其他网络设备&#xff08;如交换机、路由器和防火墙&#xff09;生成的日志 可以通过将 syslog 聚合到称为 syslog 服务器、syslog 守护程序或 syslogd 的服务器来集中 syslog。在TCP、UDP和RELP协议的帮助下&#xff0c;系统日志从设备传输到系…

VMware 系列:Vmware Workstation 嵌套 Vmware Vsphere Hypervisor(ESXI)部署后虚拟机无法上网的问题

【背景】 现有日常机器配置结构:NUCmini主机(硬件)->Deepin Linux(物理机操作系统,日常办公用)->Vmware Workstation 16->N多虚拟机 最近Vmware发布了Vsphere Hypervisor 8,也就是我们常说的ESXI 8,想要测试下新的系统,后面把自己的服务器从ESXI 7迁移到ESXI 8…

用HALCON标定助手对相机进行标定

任务要求&#xff1a; 已知相机镜头焦距f为8mm&#xff0c;相机单个CCD像素在水平和竖直两个方向上的尺寸均为3.75微米&#xff0c;相机为普通透光镜头和面阵相机&#xff0c;对相机进行标定&#xff0c;测量相机的内外参数。 操作步骤&#xff1a; 1. 在HALCON中运行gen_ca…

PHP如何持续监听Redis的消息订阅并推送到前端?

PHP如何持续监听Redis的消息订阅并推送到前端&#xff1f; 概述: 在许多Web应用程序中&#xff0c;实时推送消息是很常见的需求。当我们需要向前端实时发送消息时&#xff0c;往往会使用轮询或长轮询的方式去获取最新数据。但这种方式对服务器资源的消耗较大&#xff0c;同时响…

Python实现四个组成不相同且无重复的三位数

前言 大家早好、午好、晚好吖 ❤ ~欢迎光临本文章 如果有什么疑惑/资料需要的可以点击文章末尾名片领取源码 1.题目&#xff1a;有四个数字&#xff1a;1、2、3、4&#xff0c;能组成多少个互不相同且无重复数字的三位数&#xff1f;各是多少&#xff1f; for i in range(1,…

企业网盘哪家好?值得信赖的品牌推荐

企业网盘可谓是当下热门的企业服务之一&#xff0c;市面上也出现了非常多企业网盘工具。那么&#xff0c;企业网盘哪家好&#xff1f;哪个品牌更值得信赖呢&#xff1f; 企业网盘哪家好&#xff1f; Zoho Workdrive企业网盘一定榜上有名&#xff0c;Zoho Workdrive企业网盘是著…

【Windows 常用工具系列 13 -- Confluence 如何快速输入代码块 code block】

文章目录 Confluence 如何快速输入代码块方法二 Confluence 如何快速输入代码块 在使用使用 confluence 进行文档编辑时&#xff0c;有时需要贴上部分代码&#xff0c;但是直接贴代码在 confluence上&#xff0c;显示效果不是太好看&#xff0c;所以confluence 给我们提供了符…

城市易涝点监测,内涝积水监测仪的作用

近些年城市内涝问题格外突出&#xff0c;市民心中总在担心是不是哪一天自己的家园因为内涝&#xff0c;从而短时间内无法正常生活。并且内涝过后的淤泥可能堆积到路边或者居民住宅区等地&#xff0c;这会影响城市生态环境和公共卫生。 内涝积水监测仪为解决城市内涝问题提供了更…

【Android】声浪 UI 效果并附上详细代码

声浪效果是基于第三方实现的。 https://github.com/xfans/VoiceWaveView 将三方的 Kotlin 代码转 java 使用&#xff08;按照他的readme 进行依赖&#xff0c;好像少了点东西&#xff0c;至少本项目跑不起来&#xff09; 声浪效果在android 8 以上都是比较好的&#xff0c;不会…

prometheus热更新失败failed to reload config

一、问题描述 k8s部署的prometheus服务在请求热更新时报错: failed to reload config: one or more errors occurred while applying the new configuration (--config.file"/etc/prom/config/file/prometheus.yml")请求命令:curl -X POST http://monitor-cp-prom:…

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…

【面试HOT300】滑动窗口篇

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

焦炉加热系统简述

烟道吸力 焦炉负压烘炉分烟道的吸力会影响立火道温度&#xff0c;具体影响因素如下&#xff1a; 烟道吸力过大会导致热量被抽走&#xff0c;使立火道温度降低。烟道吸力不足会导致烟气在烘炉内停留时间过长&#xff0c;使热量无法充分利用&#xff0c;也会导致立火道温度降低…

监控摄像头连接NAS,实现监控管理一体化

嗯&#xff1f;你问干嘛要把摄像头连到NAS&#xff1f; 小马给家里安了个监控摄像头 本意是想家里有啥事也能查监控 却没想到这些监控不仅存储回放有限制 要想更多功能还是得多花钱 恰好&#xff0c;我有铁威马NAS 打开Surveillance Manager 轻松搭建网络摄像头管理系统 …

Pytorch中的tensor维度理解

Pytorch中的tensor维度理解 文章目录 Pytorch中的tensor维度理解摘要打消心理恐惧&#xff0c;从三维学起三维tensor参考文献 摘要 面对pytorch编程中的tensor时&#xff0c;我不时会感到恐惧。对里面数据是怎么排布的&#xff0c;一直没有一个直观的理解。今天我想把这个事情…

【Windows 常用工具系列 12 -- win11怎么设置不睡眠熄屏 |win11设置永不睡眠的方法】

文章目录 win11 怎么设置不睡眠熄屏 使用笔记本电脑的时候&#xff0c;如果离开电脑时间稍微长一点就会发现息屏了&#xff0c;下面介绍 设置 Win11 永不睡眠息屏的方法&#xff0c;有需要的朋友们快来看看以下详细的教程。 win11 怎么设置不睡眠熄屏 在电脑桌面上&#xff0c…

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 &#xff0c;下载liba…