65

How do I remove the default yellow box border of Selected input and select fields in chrome or any browser like safari? I want to customize input with custom box shadow css. How do I remove the default browser select border?

8
  • use background image , box shadow etc Commented Sep 6, 2012 at 10:05
  • 4
    duplicate stackoverflow.com/questions/2920306/… Commented Sep 6, 2012 at 10:07
  • 1
    yes ,this is duplicate question , always try to search or find the solution before posting. Commented Sep 6, 2012 at 10:09
  • none of them worked and i got minus one for the question, amazing
    – monk
    Commented Sep 6, 2012 at 10:13
  • 3
    and FWI it is not the duplicate one from the above question
    – monk
    Commented Sep 6, 2012 at 10:43

10 Answers 10

117
-webkit-appearance: none;

and add your own style

1
  • Don't worked for me. The background is not appear in styles computed of Chrome dev tools, but appear to me in the input element. Commented Nov 23, 2022 at 19:52
54
textarea, input { outline: none; }

via https://stackoverflow.com/a/935572/1036298

2
  • All of the vendor prefixes didn't work for me. Seems outline: none is now the default way to handle this? Commented Jan 21, 2014 at 5:09
  • This doesn't remove the icon background image/icon
    – haris
    Commented Oct 5, 2015 at 14:34
18

Mixin for Less

.appearance (@value: none) {
    -webkit-appearance:     @value;
    -moz-appearance:        @value;
    -ms-appearance:         @value;
    -o-appearance:          @value;
    appearance:             @value;
}
2
  • won't necessarily work without the border trick (see my comment), but aside from that why not write even less LESS (sorry;) .appearance {-webkit-appearance: none; -moz-appearance: none; and so on }
    – henry
    Commented Jan 24, 2015 at 18:27
  • 1
    @henry why would you prohibit yourself the ability to set a specific value? this way a mixin is more useful. But of course, it would suffice for OP request.
    – banesto
    Commented Jun 16, 2016 at 10:04
8

use simple code for remove default browser style for outline

input { outline: none; }
6

In your CSS add this:

input {-webkit-appearance: none; box-shadow: none !important; }
:-webkit-autofill { color: #fff !important; }

Only for Chrome! :)

2
2
input:-webkit-autofill {
    background: #fff !important;
}
0
1

Are you talking about when you click on an input box, rather than just hover over it? This fixed it for me:

input:focus {
   outline: none;
   border: specify yours;
}
1

When looking at an input with a type of number, you'll notice the spinner buttons (up/down) on the right-hand side of the input field. These spinners aren't always desirable, thus the code below removes such styling to render an input that resembles that of an input with a type of text.

enter image description here

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
}
3
  • 1
    Can you explain this solution? Commented Mar 5, 2019 at 18:40
  • 1
    @TobiasTheel Yes, please see my revised answer. Commented Mar 7, 2019 at 6:08
  • Thanks, way better with a little explanation :) Commented Mar 7, 2019 at 10:29
1

Before Applying Property box-shadow : none Before Applying Property box-shadow : none

After Applying Property box-shadow : none After Applying Property box-shadow : none

This is the easiest solution and it worked for me

input {
   box-shadow : none;  
}
0

When you click input box then you can see the default style. You want to remove it and add your own style then apply below code...

Method 1:

input:focus {
    outline: none;
 }

Method 2:

input:focus, textarea:focus, select:focus{
        outline: none;
}

Hope you useful this...

1
  • While this may answer the question, I can't see any difference from the existing answers. Commented Jun 14, 2021 at 12:49

Your Answer

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

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