How to remove 3D border of input filed in Chrome

Question

I want to add blue shadow highlight for text input when it receives focus:

input:focus {
    box-shadow:0px 0px 5px #6192D1;
    -webkit-box-shadow: 0px 0px 5px  #6192D1;
    -moz-box-shadow: 0px 0px 5px  #6192D1;       
    outline: 0;
}

In Firefox it looks well, but Chome adds some inner 3d looking borders.

JSFiddle

Chrome adds following styles:

border-top-style: inset;
border-top-width: 2px;
border-bottom-style: inset;
border-bottom-width: 2px;
border-left-style: inset;
border-left-width: 2px;
border-right-style: inset;
border-right-width: 2px;

If I set something like:

border-width: 2px;
border-color: transparent;
border-style: inset;

Border has gone in Chrome, but in FF it makes the field resizing on focus.

JSFiddle

Any ideas how to get rid of 3d border not hurting the appearence in FF?

Answer 1

First of all you are adding a 2px border on :focus, so hence, the field moves as border takes space outside the element and not inside, to get rid of the Chromes grey border, you need to use -webkit-appearance: none; and also use -moz-appearance: none; which will get rid of the grey border in chrome, and nice looking input field in firefox...

input {
    padding: 4px;
    -webkit-appearance: none; 
    -moz-appearance: none; 
}

Demo

Now, to standardize more, add border: 2px solid #eee; on the input tag

input {
    padding: 4px;
    -webkit-appearance: none; 
    -moz-appearance: none; 
    border: 2px solid #eee; /* Here */
}

Demo 2

---

Note: You are using general element selectors, so all the input fields will be affected, consider using a class or an id instead.