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

Question

我为输入元素设置了边框和边框半径。 当您在输入标签内聚焦时，会出现一个几乎没有边框半径的蓝色边框。 当您单击 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] 选择器

Answer 1

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