单击/聚焦时删除输入元素的边框答案

【问题标题】：remove border for input elements when clicked/focused单击/聚焦时删除输入元素的边框
【发布时间】：2021-07-15 21:39:21
【问题描述】：

我为输入元素设置了边框和边框半径。当您将焦点放在输入标签内时，会出现一个几乎没有边框半径的蓝色边框。当您单击 input[type=submit] 元素时，也会发生同样的情况。我想定义和控制这个属性。

我想有一个 css 技巧可以解决这个问题，但我不确定。我是否更改了 box-shadow 属性或边框属性。怎么做？

input{
   width:60%;
   font-size:1.05em;
   min-width:250px;
   display:block;
   margin-bottom:3.5%;
   padding:0.8% 1.5%;
   border-radius:5px;
   border:1px solid white;
   transform:rotateX(10deg);
 }
.submit{
   background:rgb(0,150,255);
   border:1px solid rgb(0,150,255);
   transition: transform 1s;
   color:white;
   box-shadow: 2px 2px 1px silver;
 }
 input:focus , .submit:focus{
   background:rgba(0,120,255,1);
   border:none;
   transform: scaleY(1.1);
 }

我使用的是类选择器而不是 input[type=submit] 选择器

【问题讨论】：

How to remove the border highlight on an input text element的可能重复

标签： css

【解决方案1】：

您正在寻找的 CSS“技巧”是 outline:none

【讨论】：

工作就像一个魅力。谢谢。
**不要在没有添加另一个焦点位置指示的情况下执行此操作。它的存在是为了便于访问，一般来说，人们需要知道他们正在输入什么输入。
如果你看到 css 代码，在 input:focus 上他设置了蓝色背景，我认为这是一个很好的指标。