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

三:实现效果图

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

相关推荐
Komorebi゛1 小时前
【Vue3+Element Plus】el-dialog弹窗点击遮罩层无法关闭弹窗问题记录
前端·vue.js·elementui
vim怎么退出1 小时前
一次线上样式问题复盘:当你钻进 CSS 牛角尖时,问题可能根本不在 CSS
前端·css
echo_e1 小时前
手搓前端虚拟列表
前端
用泥种荷花1 小时前
【LangChain学习笔记】创建智能体
前端
再吃一根胡萝卜1 小时前
在 Ant Design Vue 的 a-table 中将特定数据行固定在底部
前端
yyf198905251 小时前
CSS相关中文书籍
css
掘金安东尼2 小时前
Vercel:我们为 React2Shell 发起了一项价值 100 万美元的黑客挑战
前端·javascript·github
掘金安东尼2 小时前
浏览器处理Base64数据的速度有多快?
前端·javascript·github
掘金安东尼2 小时前
为不同场景设计多样化的页面过渡动画
前端·javascript·github