remove border for input elements when clicked/focused

Question

I have set a border and a border-radius for my input elements. When you focus inside the input tags, an almost blue border without a border radius appears. The same happens when you click on the input[type=submit] element. I ould like to define and control this properties.

I supppose there is a css trick to go about this, but I'm not sure. Do I change the box-shadow properties or the border properties. And how?

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

I'm using a class selector instead of the input[type=submit] selector

Answer 1

The css "trick" you're looking for is outline:none