remove inner shadow of text input

Question

So I have a text input, im using html5, on chrome, and I want to change the look of a text input, I've removed the outline on focus (orange on chrome), I set the background to a light color #f1f1f1 but now there is like a thicker border on the top and left sides, like it's meant to look pushed in, when there is no change in background color this doesn't happen. How do I remove it? Sorry I can't provide a picture, on a mobile device.

It happens on chrome, ie, and Firefox, can't test any others.

Answer 1

Add border: none or border: 0 to remove border at all, or border: 1px solid #ccc to make border thin and flat.

To remove ghost padding in Firefox, you can use ::-moz-focus-inner:

::-moz-focus-inner {
    border: 0;
    padding: 0;
}

See live demo.