89

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.

9 Answers 9

156

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

2
  • 10
    The first line, border-style: solid, is the best answer to this question. Jul 20, 2013 at 17:30
  • 1
    border-style: none was the answer is was looking for May 2, 2015 at 21:16
53

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: Remove textarea inner shadow on Mobile Safari (iPhone)

1
30

None of the solution are working currently. Here is my solution. You can add prefixes.

box-shadow: inset 0px 0px 0px 0px red;
0
19

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.

1
  • When I do this it has no border, yeah, but when I set the border to 1px and set the color to black only two sides are set. The other is white.
    – FabianCook
    Oct 9, 2012 at 1:26
12

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.

4
  • If I set the border to any other color, lets say #eee, only two sides are still being set
    – FabianCook
    Oct 9, 2012 at 1:29
  • Look my update. You may need to change border style and size too, to solid and 1px. Oct 9, 2012 at 1:30
  • Thanks. I based mine of yours so yeah.
    – FabianCook
    Oct 9, 2012 at 1:34
  • 2
    box-shadow was what made the solution work for me, no other solutions had this bit.
    – Nate M.
    Aug 4, 2017 at 14:55
9

Try this
outline: none;

live demo https://codepen.io/wenpingguo/pen/KQgbXq

3

All browsers, including Safari (+ mobile):

input[type=text] {   
    /* Remove */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* Optional */
    border: solid;
    box-shadow: none;
    /*etc.*/
}
0

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.

0

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"/>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.