Logo

Logo

【表单】如何去掉input被点击选中时的黑色边框

Pastore Antonio
Pastore Antonio 2022年05月27日
276 阅读 0 评论 约 317 字 阅读约 1 分钟

问题描述
在制作表单时,想改变input被点击后的边框样式,却发现怎么修改被点击后的input输入框都存在黑色实线
在这里插入图片描述
问题原委
如图所示,该黑色实线是出在input的外边框,可判断为outline属性。
outline属性是在一个声明中设置所有的轮廓属性。

解决方案
1.直接给input添加outline:none;

input{outline: none;}

2.在input:focus中添加outline:none。(当元素获得焦点时(当通过鼠标点击选中元素或通过 tab 键定位到元素时),发生 focus 事件。)

input:focus{border:.2rem salmon solid;outline: none;}

在这里插入图片描述

查看完整代码

橙子主题打折出售

其实我不卖,主要是这里是放广告的,所以就放了一个
毕竟主题都没做完,卖了也是坑.

购买它

附件下载

共 2 个文件
在这里插入图片描述
PNG 14.4 KB
在这里插入图片描述
PNG 13.7 KB
部分文章可能存在转载,如果涉及到侵权,请联系删除文章。

探索AIGC相关的精彩内容,共 15 篇文章

Azure AI 服务之语音识别

简介 Azure AI 服务中的语音识别 API 是微软提供的一项先进技术,旨在帮助开发者轻松实现语 ... 【表单】如何去掉input被点击选中时的黑色边框

2026-02-17 · Xzavier Aaron
MCP | 一文详解什么是 MCP以及 MCP 可以做什么

一、什么是 MCP MCP(Model Context Protocol)是一个专为大型语言模型(L ... 【表单】如何去掉input被点击选中时的黑色边框

2026-02-14 · Shen, Luke
你的工作流程,值得一个“全自动数字分身”:录制、截图、成文,一气呵成

一、一句话认识 TestFlow Recorder 在数字化工作环境中,如何准确记录操作步骤并生成清 ... 【表单】如何去掉input被点击选中时的黑色边框

2026-02-14 · Xzavier Aaron
Flowise 前端框架配置指南

用户需求 问题:有没有适合配置 Flowise 的前端框架? 目标:寻找类似 Open WebUI ... 【表单】如何去掉input被点击选中时的黑色边框

2026-02-14 · Xzavier Aaron