How to remove 3D border of input filed in Chrome
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;
}
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 */
}
Note: You are using general element selectors, so all the
input
fields will be affected, consider using aclass
or anid
instead.
Comments
-
ChatCloud about 4 years
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.
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.
Any ideas how to get rid of 3d border not hurting the appearence in FF?