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

Possible duplicate of [How to remove the border highlight on an input text element](http://stackoverflow.com/questions/1457849/how-to-remove-the-border-highlight-on-an-input-text-element) — imtheman, Jul 06 '16 at 22:53

score 14 · Answer 1 · answered Jul 06 '16 at 22:54

14

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

answered Jul 06 '16 at 22:54

Sergio Fandino

435
3
7

1

Worked like a charm. Thanks. – One Jul 06 '16 at 22:58
**Don't do this without adding another indication of where focus is. It's there for accessibility, and in general, people need to know what input they are typing into. – AJFarkas Jul 06 '16 at 23:24
If you see the css code, on the input:focus he sets a blue background, I think that's a good indicator. – Sergio Fandino Jul 07 '16 at 13:55

remove border for input elements when clicked/focused

1 Answers1