title: remove border for input elements when clicked/focused
body: <p>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.</p>
  
  <p>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?</p>
  
  <pre><code>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);
   } 
  </code></pre>
  
  <p>I'm using a class selector instead of the input[type=submit] selector</p>