remove inner shadow of text input
HtmlCssInputHtml Problem Overview
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.
Html Solutions
Solution 1 - Html
border-style:solid;
will override the inset
style. Which is what you asked.
border:none
will remove the border all together.
border-width:1px
will set it up to be kind of like before the background change.
border:1px solid #cccccc
is more specific and applies all three, width, style and color.
Solution 2 - Html
This is the solution for mobile safari:
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
as per https://developer.mozilla.org/en-US/docs/Web/CSS/appearance
and as suggested here: https://stackoverflow.com/questions/3062968/remove-textarea-inner-shadow-on-mobile-safari-iphone
Solution 3 - Html
None of the solution are working currently. Here is my solution. You can add prefixes.
box-shadow: inset 0px 0px 0px 0px red;
Solution 4 - Html
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.
Solution 5 - Html
Set border: 1px solid black
to make all sides equals and remove any kind of custom border (other than solid).
Also, set box-shadow: none
to remove any inset shadow applied to it.
Solution 6 - Html
Try this
outline: none;
live demo https://codepen.io/wenpingguo/pen/KQgbXq
Solution 7 - Html
All browsers, including Safari (+ mobile):
input[type=text] {
/* Remove */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Optional */
border: solid;
box-shadow: none;
/*etc.*/
}
Solution 8 - Html
I'm working on firefox. and I was having the same issue, input type text are auto defined something looks like boxshadow inset, but it's not.
the you want to change is border... just setting border:0;
and you're done.
Solution 9 - Html
here is a small snippet that might be cool to try out:
input {
border-radius: 10px;
border-color: violet;
border-style: solid;
}
note that: border-style
removes the inner shadow.
input {
border-radius: 10px;
border-color: violet;
border-style: solid;
}
<input type="text"/>