How to remove default chrome style for select Input?

Question

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?

duplicate http://stackoverflow.com/questions/2920306/google-chrome-form-autofill-and-its-yellow-background — supersaiyan, Sep 06 '12 at 10:07
yes ,this is duplicate question , always try to search or find the solution before posting. — Mansoor Jafar, Sep 06 '12 at 10:09
none of them worked and i got minus one for the question, amazing — monk, Sep 06 '12 at 10:13
You got a minus one because the question has already been asked and answered, plus you weren't exactly clear, you didn't show any code or what you have tried already. It wasn't my -1 btw. — Kyle, Sep 06 '12 at 10:16
ah but it is a duplicate of this one ;) note that you're looking for the answer I've linked, not the one that's currently marked as accepted http://stackoverflow.com/questions/5345897/html-select-font-size/11869370#comment44107277_11869370 — henry, Jan 24 '15 at 18:06

score 116 · Accepted Answer · edited Dec 22 '17 at 19:08

116

-webkit-appearance: none;

and add your own style

edited Dec 22 '17 at 19:08

Hunter Turner

6,804
11
41
56

answered Sep 06 '12 at 10:05

Sowmya

26,684
21
96
136

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. – Sandro Santos Nov 23 '22 at 19:52

score 51 · Answer 2 · edited May 23 '17 at 12:02

51

textarea, input { outline: none; }

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

edited May 23 '17 at 12:02

Community

1
1

answered Sep 06 '12 at 10:08

Nithin Emmanuel

937
1
8
18

All of the vendor prefixes didn't work for me. Seems `outline: none` is now the default way to handle this? – Derek Hunziker Jan 21 '14 at 05:09
This doesn't remove the icon background image/icon – haris Oct 05 '15 at 14:34
Only this Worked for me too! Thanks – Tejasvi Hegde Mar 06 '17 at 20:20

score 17 · Answer 3 · answered Jan 24 '15 at 13:49

17

Mixin for Less

.appearance (@value: none) {
    -webkit-appearance:     @value;
    -moz-appearance:        @value;
    -ms-appearance:         @value;
    -o-appearance:          @value;
    appearance:             @value;
}

answered Jan 24 '15 at 13:49

Pesulap

884
8
19

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 Jan 24 '15 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 Jun 16 '16 at 10:04

Behnam · Answer 4 · 2018-04-10T10:50:14.677

8

use simple code for remove default browser style for outline

input { outline: none; }

edited Apr 10 '18 at 10:50

answered Apr 07 '14 at 12:46

Behnam

6,244
1
39
36

score 6 · Answer 5 · answered Sep 06 '12 at 10:06

6

In your CSS add this:

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

Only for Chrome! :)

answered Sep 06 '12 at 10:06

Praveen Kumar Purushothaman

164,888
24
203
252

3

... And Safari and Opera and all other browsers in this list http://en.wikipedia.org/wiki/List_of_web_browsers#WebKit-based :-) – Julian F. Weinert Apr 09 '14 at 10:37
@Julian While I wrote this answer, I was unaware of that. :) Thanks anyways. :D – Praveen Kumar Purushothaman Apr 09 '14 at 11:14

score 2 · Answer 6 · edited Jun 14 '21 at 20:31

2

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

edited Jun 14 '21 at 20:31

Sven Eberth

3,057
12
24
29

answered Sep 06 '12 at 10:06

supersaiyan

1,670
5
16
36

score 1 · Answer 7 · answered Aug 28 '14 at 04:28

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;
}

answered Aug 28 '14 at 04:28

Adam

2,027
1
16
27

Keith Gulbro · Answer 8 · 2019-03-07T06:07:49.113

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.

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
}

edited Mar 07 '19 at 06:07

answered Mar 05 '19 at 17:15

Keith Gulbro

97
5

1

Can you explain this solution? – Tobias Theel Mar 05 '19 at 18:40
1

@TobiasTheel Yes, please see my revised answer. – Keith Gulbro Mar 07 '19 at 06:08
Thanks, way better with a little explanation :) – Tobias Theel Mar 07 '19 at 10:29

score 1 · Answer 9 · edited Aug 13 '19 at 19:52

1

Before 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;  
}

edited Aug 13 '19 at 19:52

brooksrelyt

3,925
5
31
54

answered Aug 13 '19 at 19:30

Prajwal

95
10

score 0 · Answer 10 · answered Jun 14 '21 at 11:48

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...

answered Jun 14 '21 at 11:48

Athif Saheer

4,539
3
9
14

While this may answer the question, I can't see any difference from the existing answers. – Sven Eberth Jun 14 '21 at 12:49

How to remove default chrome style for select Input?

10 Answers10