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?
-
use background image , box shadow etc– supersaiyanCommented Sep 6, 2012 at 10:05
-
4duplicate stackoverflow.com/questions/2920306/…– supersaiyanCommented Sep 6, 2012 at 10:07
-
1yes ,this is duplicate question , always try to search or find the solution before posting.– Mansoor JafarCommented Sep 6, 2012 at 10:09
-
none of them worked and i got minus one for the question, amazing– monkCommented Sep 6, 2012 at 10:13
-
3and FWI it is not the duplicate one from the above question– monkCommented Sep 6, 2012 at 10:43
10 Answers
-webkit-appearance: none;
and add your own style
-
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
textarea, input { outline: none; }
-
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 -
Mixin for Less
.appearance (@value: none) {
-webkit-appearance: @value;
-moz-appearance: @value;
-ms-appearance: @value;
-o-appearance: @value;
appearance: @value;
}
-
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 }
– henryCommented 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.– banestoCommented Jun 16, 2016 at 10:04
use simple code for remove default browser style for outline
input { outline: none; }
In your CSS add this:
input {-webkit-appearance: none; box-shadow: none !important; }
:-webkit-autofill { color: #fff !important; }
Only for Chrome! :)
-
3... And Safari and Opera and all other browsers in this list en.wikipedia.org/wiki/List_of_web_browsers#WebKit-based :-) Commented Apr 9, 2014 at 10:37
-
@Julian While I wrote this answer, I was unaware of that. :) Thanks anyways. :D Commented Apr 9, 2014 at 11:14
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;
}
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.
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
-
1
-
1
-
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...
-
While this may answer the question, I can't see any difference from the existing answers. Commented Jun 14, 2021 at 12:49