用css实现原生form中radio单选框和input的hover已经focus的样式

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

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

二.实现方法

javascript 复制代码
设置单选框颜色:
.comItem .content input[type="radio"] {
    accent-color: #D9262C;
}

设置hover颜色:
input:hover {
    border-color: #DF464B;
}
和focus的颜色
input:focus {
     border-color: #DF464B;
}

三:实现效果图

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

相关推荐
BillKu8 分钟前
Java解析前端传来的Unix时间戳
java·前端·unix
@Mr_LiuYang8 分钟前
网页版便签应用开发:HTML5本地存储与拖拽交互实践
前端·交互·html5·html5便签应用
JacksonGao12 分钟前
一分钟带你了解React Fiber的工作单元结构!
前端·react.js
前端农民晨曦13 分钟前
深入浏览器事件循环与任务队列架构
前端·javascript·面试
Vhen15 分钟前
Taro Echarts封装内外环形饼图
前端
Spider_Man28 分钟前
JavaScript对象那些坑:初学者必踩的“陷阱”与进阶秘籍
前端·javascript
海螺先生1 小时前
Cursor 高阶使用指南:AI 辅助开发的深度整合
前端
我在北京coding1 小时前
Uncaught ReferenceError: process is not defined
前端·javascript·vue.js
Hilaku1 小时前
我为什么觉得 React 正在逐渐失去吸引力?
前端·react.js·前端框架
用户52709648744901 小时前
🎨 Stylelint:让你的 CSS 代码优雅如诗
前端