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

三:实现效果图

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

电脑内存升级

ddr代兼容 自从DDR内存时代开启之后,只要满足内存的插槽规格相同(DDR3或DDR4或DDR5即为内存规格)这一条件,不同品牌、不同频率以及不同容量的茶品都可以一起使用,除了品牌和容量的影响之外,不同频率的搭配可能会造成性能方面的影…

“我,24岁,年薪20万”:选对了行业究竟多重要?

那些在职场上顺风顺水,按部就班拿到高薪的人都有什么特点? 今天的主人公Flee告诉我,是稳。 在她的故事里,我看到一个“别人家的姑娘”,是怎样在职场上稳步晋升,大学毕业仅2年,就拿到18.6K月薪&a…

opencv-直方图均衡化

直方图均衡化是一种用于增强图像对比度的图像处理技术。它通过调整图像的灰度级别分布,使得图像中各个灰度级别的像素分布更均匀,从而提高图像的对比度。 在OpenCV中,你可以使用cv2.equalizeHist()函数来进行直方图均衡化。 以下是一个简单…

Flutter开发实践:用一套代码构建多端精美应用

🏆作者简介,黑夜开发者,CSDN领军人物,全栈领域优质创作者✌,CSDN博客专家,阿里云社区专家博主,2023年6月CSDN上海赛道top4。 🏆数年电商行业从业经验,历任核心研发工程师…

四、文件包含漏洞

一、文件包含漏洞 解释:文件包含漏洞是一种注入型漏洞,其本质就是输入一段用户能够控制的脚本或者代码,并让服务端执行;其还能够使得服务器上的源代码被读取,在PHP里面我们把可重复使用的函数写入到单个文件中&#x…

厦门某智慧社区的智慧排水监测系统实施落地

厦门某智慧社区的智慧排水监测系统实施落地 智慧社区的排水系统是一种高度智能化、高效且环保的排水解决方案,它结合了自动化控制系统、计算机网络技术、传感监测技术以及环保理念等多个领域的知识。其主要作用是确保社区的排水系统能够高效、稳定、环保地运行&…

如何用CHAT分析网络流行语的构成特点及趋势?

问CHAT:请分析下网络流行语的构成特点及趋势 CHAT回复: 网络流行语的构成特点: 1. 新颖性:网络流行语象征着新潮的概念、思想和观点,它们新颖独特且易于传播。 2. 深入人心的设定:网络流行语通常是由大众…

基于Vue3的低代码开发平台——JNPF

目录 一、什么是Vue.js ? 二、Jnpf-Web-Vue3 的技术栈介绍 (1)Vue3.x (2)Vue-router4.x (3)Vite4.x (4)Ant-Design-Vue3.x (5)TypeScript &#x…

这样写postman实现参数化,阿里p8都直呼牛逼

什么时候会用到参数化 比如:一个模块要用多组不同数据进行测试 验证业务的正确性 Login模块:正确的用户名,密码 成功;错误的用户名,正确的密码 失败 postman实现参数化 在实际的接口测试中,部分参数…

猫罐头多久喂一次?放心猫罐头品牌推荐

猫罐头是猫咪喜爱的食物之一,然而,正确的喂养方法也是非常重要的。不能随意给猫咪喂食猫罐头。 作为从业6年的宠物护理师来说,只买合适的,贵的不如好的,只要配方不出错营养跟得上,观察自家猫咪体质真的基本…

【Mysql】[Err] 1293 - Incorrect table definition;

基本情况 SQL文件描述 /* Navicat MySQL Data TransferSource Server : cm4生产-200 Source Server Version : 50725 Source Host : 192.168.1.200:3306 Source Database : db_wmsTarget Server Type : MYSQL Target Server Version : 50725 File…

采用connector-c++ 8.0操作数据库

1.下载最新的Connector https://dev.mysql.com/downloads/connector/cpp/,下载带debug的库。 解压缩到本地,本次使用的是带debug模式的connector库: 注:其中mysqlcppconn与mysqlcppconn8的区别是: 2.在cmakelist…

面试官:什么是三色标记

程序员的公众号:源1024,获取更多资料,无加密无套路! 最近整理了一波电子书籍资料,包含《Effective Java中文版 第2版》《深入JAVA虚拟机》,《重构改善既有代码设计》,《MySQL高性能-第3版》&…

14.(vue3.x+vite)组件间通信方式之pinia

前端技术社区总目录(订阅之前请先查看该博客) 示例效果 Pinia简介 Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态。 Pinia与Vuex比较 (1)Vue2和Vue3都支持,这让我们同时使用Vue2和Vue3的小伙伴都能很快上手。 (2)pinia中只有state、getter、action,抛弃了Vu…

产品经理的具体工作职责有什么?

产品经理是现代企业中非常重要的一种职位,其工作职责也非常广泛和复杂。产品经理需要在市场、用户、技术等多个方面进行综合考虑,为企业开发出具有竞争力的产品,从而推动企业的发展。下面我们将详细介绍产品经理的具体工作职责。 一、市场调研…

第二十章 多线程

20.2创建线程 20.2.1继承Thread类 Thread类是Java.lang包中的一个类,从这个类中实例化的对象代表线程,程序员启动一个新线程需要建议Thread实例。 public class ThreadTest extedns Thread{} run方法格式: public void run(){} 20.1让线…

opencv-2D直方图

cv2.calcHist() 是 OpenCV 中用于计算直方图的函数。它可以计算一维或多维直方图,用于分析图像中像素值的分布。 基本的语法如下: hist cv2.calcHist(images, channels, mask, histSize, ranges[, hist[, accumulate]])参数说明: images:…

Verilog开源项目——百兆以太网交换机(三)Hash模块设计

Verilog开源项目——百兆以太网交换机(三)Hash模块设计 🔈声明:未经作者允许,禁止转载 😃博主主页:王_嘻嘻的CSDN主页 🔑全新原创以太网交换机项目,Blog内容将聚焦整体架…

TypeScript 学习笔记 第二部分 webpack 创建typescript项目

【视频链接】尚硅谷TypeScript教程(李立超老师TS新课) 创建webpack 项目 IDE:webstorm 新建一个空的项目运行npm init初始化项目目录结构 1. 安装 webpack:构建工具webpack-cli: webpack的命令行工具typescript&am…

【图数据库实战】gremlin语法

Gremlin 是 Apache TinkerPop 的图遍历语言。Gremlin 是一种函数式数据流语言,使用户能够简洁地表达对其应用程序属性图的复杂遍历(或查询)。每个 Gremlin 遍历都由一系列(可能嵌套的)步骤组成。步骤对数据流执行原子操…