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

User · Answer

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

User · Answer

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   Example  https   jsbin com quleh 2 edit html output

User · Answer

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    x000D   x000D  input   x000D      border-radius  10px  x000D      border-color  violet  x000D      border-style  solid  x000D      x000D   lt input type  text   gt  x000D   x000D   x000D

User · Answer

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

User · Answer

None of the solution are working currently  Here is my solution  You can add prefixes   box-shadow  inset 0px 0px 0px 0px red

User · Answer

This is the solution for mobile safari   -webkit-appearance  none   as suggested here  Remove textarea inner shadow on Mobile Safari  iPhone

User · Answer

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

User · Answer

Try this  outline  none    live demo https   codepen io wenpingguo pen KQgbXq

User · Answer

All browsers  including Safari    mobile   input type text              Remove        -webkit-appearance  none      -moz-appearance  none      appearance  none              Optional        border  solid      box-shadow  none        etc

[html] remove inner shadow of text input

Examples related to html

Examples related to css

Examples related to input