当前位置: 首页 > news >正文

用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;
}

三:实现效果图

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

相关文章:

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

一.问题描述:用css实现原生form中radio单选框和input的hover已经focus的样式 在实际的开发中,一般公司ui都会给效果图,比如单选按钮radio样式,input输入框hover的时候样式,以及focus的时候样式,等等&#…...

【中国平安社招校招】【内推】【当天内推】

中国平安社招校招内推 通过内推链接即时内推,反馈速度比正常要快(可私信问进度) 开放大量HC(不限岗位和地区,技术、设计、产品、运营、数据等都可内推) Step1:查看相关职位 浏览平安的招聘官网:复制以下地址至浏览器打开。注意以下链接包含…...

CentOS 8最小安装,VM使用这个内存占用小很多

文章目录 一、安装包下载作者使用的安装包 二、安装过程截图三、最小化安装拥有的外部命令四、查看ip(方便ssh连接)五、yum源有问题参考文档 一、安装包下载 CentOS 网站: https://www.centos.org/CentOS 维基: https://wiki.cen…...

【C++ Primer Plus学习记录】递增运算符(++)和递减运算符(--)

递增运算符()和递减运算符(--):前缀版本位于操作数前面,如x;后缀版本位于操作数后面,如x。两个版本对操作数的影响是一样的,但是影响的时间不同。这就像吃饭前买单和吃饭…...

Oracle 数据库中 查询时如何使用日期(时间)作为查询条件

在 Oracle 数据库中,可以使用日期(时间)作为查询条件来筛选数据。 格式化日期的三种方式 方式一: 关键字 DATE 使用关键字DATE, 仅表示日期类型,并不包含时间信息 方式二:关键字TIMESTAMP 使用关键字TI…...

Tomcat 基线安全加固操作

目录 账号管理、认证授权 日志配置 通信协议 设备其他安全要求 账号管理、认证授权 ELK-tomcat-01-01-01 编号 ELK-Tomcat-01-01-01 名称 为不同的管理员分配不同的账号 实施目的 应按照用户分配账号,避免不同用户间共享账号,提高安全性。 问题影响 …...

redis缓存穿透、击穿、雪崩

在我们日常的开发中,无不都是使用数据库来进行数据的存储,由于一般的系统任务中通常不会存在高并发的情况,所以这样看起来并没有什么问题,可是一旦涉及大数据量的需求,比如一些商品抢购的情景,或者是主页访…...

什么是数字孪生?

数字孪生是指通过数字化技术手段,将现实世界中的实体物理系统或过程与其数字化模型相连接,实现实体物理系统或过程的虚拟仿真、监测、预测和优化等功能的一种技术。数字孪生技术可以将物理系统的运行状态、性能参数、故障信息等实时反馈到数字模型中&…...

【DevOps】Git 图文详解(八):后悔药 - 撤销变更

Git 图文详解(八):后悔药 - 撤销变更 1.后悔指令 🔥2.回退版本 reset3.撤销提交 revert4.checkout / reset / revert 总结 发现写错了要回退怎么办?看看下面几种后悔指令吧! ❓ 还没提交的怎么撤销&#x…...

WPF基础DataGrid控件

WPF DataGrid 是一个用于显示和编辑表格数据的强大控件。它提供了丰富的功能,包括排序、筛选、分组、编辑、选择等,使你能够以类似电子表格的方式呈现和操作数据。 DataGrid 的布局主要由以下部分组成: 列定义 (Columns): DataGrid 列定义了…...

丐版设备互联方案:安卓linux互联局域网投屏,文件共享,共享剪切板

华为,苹果,甚至小米最近也推出了澎湃OS,发现实在是太方便了,当然这些对硬件,系统的要求还是比较高,我用的主力机是小米12pro和ubuntu,win双系统也…...

GZ033 大数据应用开发赛题第08套

2023年全国职业院校技能大赛 赛题第08套 赛项名称: 大数据应用开发 英文名称: Big Data Application Development 赛项组别: 高等职业教育组 赛项编号: GZ033 …...

【SpringMvc】SpringMvc +MyBatis整理

🎄欢迎来到边境矢梦的csdn博文🎄 🎄本文主要梳理 Java 框架 中 SpringMVC的知识点和值得注意的地方 🎄 🌈我是边境矢梦,一个正在为秋招和算法竞赛做准备的学生🌈 🎆喜欢的朋友可以关…...

java springboot测试类鉴定虚拟MVC运行值与预期值是否相同

好 上文java springboot在测试类中构建虚拟MVC环境并发送请求中 我们模拟的MVC环境 发送了一个请求 我们这次需要 对比 预期值和运行值是否一直 这里 我们要用一个 MockMvcResultMatchers 他提供了非常多的校验类型 例如 请求有没有成功 有没有包含请求头信息 等等 这里 我们做…...

UE5的TimeLine的理解

一直以来,我对动画的理解一直是这样的: 所谓动画,就是可导致可视化内容变化的参数和时间的对应关系。 我不能说这个观点现在过时了,只能说自己狭隘了。因为UE的TimeLine的设计理念真让人竖大拇指。 当我第一次看到TimeLine节点的…...

react原理及合成事件原理

文章目录 react的理解react创建组件的三种写法react的工作原理初始化的渲染流程。页面更新的流程。diffing 算法计算更新视图diff策略 react合成事件原理一、React合成事件的概念二、React合成事件的原理三、React合成事件的优势四、React合成事件的使用方法五、总结 react的理…...

独立版求职招聘平台小程序开发

小程序招聘系统开发 我们开发了一款高效、便捷的互联网招聘平台。在这里,可以轻松实现企业入驻、职位发布、在线求职、精准匹配职位和人才,以及参与招聘会等功能。目标是为求职者和企业搭建一个连接彼此的桥梁,帮助您更快地找到满意的工作&…...

Redis事务+秒杀案例

Redis事务是一个单独的隔离操作,是指将多条命令放在一个命令队列当中,按顺序执行,保证多个命令在同一个事务中执行而不受其他客户端的影响。 通俗来说就是:串联多个命令防止别的命令插队。 1.Multi、Exec、discard 在输入Multi命…...

目标分割技术-语义分割总览

前言 博主现任高级人工智能工程师,曾发表多篇SCI且获得过多次国际竞赛奖项,理解各类模型原理以及每种模型的建模流程和各类题目分析方法。目的就是为了让零基础快速使用各类代码模型,每一篇文章都包含实战项目以及可运行代码。欢迎大家订阅一…...

基于C#实现最长公共子序列

一、作用 最长公共子序列的问题常用于解决字符串的相似度,是一个非常实用的算法,作为码农,此算法是我们的必备基本功。 二、概念 举个例子,cnblogs 这个字符串中子序列有多少个呢?很显然有 27 个,比如其…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时&#xff0c;没有加载所有类库。插件运行过程中用到某个类库&#xff0c;会从CAD的安装目录找&#xff0c;找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库&#xff0c;就用插件程序加载进…...

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件&#xff1a; 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...

Qt 事件处理中 return 的深入解析

Qt 事件处理中 return 的深入解析 在 Qt 事件处理中&#xff0c;return 语句的使用是另一个关键概念&#xff0c;它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别&#xff1a;不同层级的事件处理 方…...

区块链技术概述

区块链技术是一种去中心化、分布式账本技术&#xff0c;通过密码学、共识机制和智能合约等核心组件&#xff0c;实现数据不可篡改、透明可追溯的系统。 一、核心技术 1. 去中心化 特点&#xff1a;数据存储在网络中的多个节点&#xff08;计算机&#xff09;&#xff0c;而非…...

C++实现分布式网络通信框架RPC(2)——rpc发布端

有了上篇文章的项目的基本知识的了解&#xff0c;现在我们就开始构建项目。 目录 一、构建工程目录 二、本地服务发布成RPC服务 2.1理解RPC发布 2.2实现 三、Mprpc框架的基础类设计 3.1框架的初始化类 MprpcApplication 代码实现 3.2读取配置文件类 MprpcConfig 代码实现…...

基于鸿蒙(HarmonyOS5)的打车小程序

1. 开发环境准备 安装DevEco Studio (鸿蒙官方IDE)配置HarmonyOS SDK申请开发者账号和必要的API密钥 2. 项目结构设计 ├── entry │ ├── src │ │ ├── main │ │ │ ├── ets │ │ │ │ ├── pages │ │ │ │ │ ├── H…...

Tauri2学习笔记

教程地址&#xff1a;https://www.bilibili.com/video/BV1Ca411N7mF?spm_id_from333.788.player.switch&vd_source707ec8983cc32e6e065d5496a7f79ee6 官方指引&#xff1a;https://tauri.app/zh-cn/start/ 目前Tauri2的教程视频不多&#xff0c;我按照Tauri1的教程来学习&…...

【Redis】Redis从入门到实战:全面指南

Redis从入门到实战:全面指南 一、Redis简介 Redis(Remote Dictionary Server)是一个开源的、基于内存的键值存储系统,它可以用作数据库、缓存和消息代理。由Salvatore Sanfilippo于2009年开发,因其高性能、丰富的数据结构和广泛的语言支持而广受欢迎。 Redis核心特点:…...