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

三:实现效果图

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

相关推荐
a1117768 分钟前
Markdown生成思维导图(html 开源)
前端·开源·html
我命由我1234518 分钟前
React - state、state 的简写方式、props、props 的简写方式、类式组件中的构造器与 props、函数式组件使用 props
前端·javascript·react.js·前端框架·html·html5·js
钰衡大师20 分钟前
Vue 3 源码学习教程
前端·vue.js·学习
C澒21 分钟前
React + TypeScript 编码规范|统一标准 & 高效维护
前端·react.js·typescript·团队开发·代码规范
时光少年38 分钟前
Android 视频分屏性能优化——GLContext共享
前端
风无雨1 小时前
滚动条上下按钮隐藏不生效的原因与修复(::-webkit-scrollbar-button)
css·css3·webkit
IT_陈寒1 小时前
JavaScript开发者必知的5个性能杀手,你踩了几个坑?
前端·人工智能·后端
跟着珅聪学java1 小时前
Electron 精美菜单设计
运维·前端·数据库
日光倾1 小时前
【Vue.js 入门笔记】闭包和对象引用
前端·vue.js·笔记
一只程序熊1 小时前
UniappX 未找到 “video“ 组件,已自动当做 “view“ 组件处理。请确保代码正确,或重新生成自定义基座后再试。
前端