点击/聚焦输入元素时去除边框

Question

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

我认为有一种CSS技巧可以解决这个问题，但我不确定。我是更改box-shadow属性还是border属性？如何操作？

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]选择器。

- One

---

可能是如何移除输入文本元素的边框高亮的重复问题。 - imtheman

Answer 1

你要找的CSS“技巧”是outline:none。

- Sergio Fandino

---

运行得非常好，谢谢。 - One

不要这样做，除非添加另一个指示焦点所在位置的方式。它是为了可访问性而存在的，在一般情况下，人们需要知道他们正在输入什么内容。 - AJFarkas

如果您查看CSS代码，在input:focus上设置蓝色背景，我认为这是一个很好的指示器。 - Sergio Fandino