52

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?

monk
  • 4,281
  • 12
  • 38
  • 64
  • use background image , box shadow etc – supersaiyan Sep 06 '12 at 10:05
  • 4
    duplicate http://stackoverflow.com/questions/2920306/google-chrome-form-autofill-and-its-yellow-background – supersaiyan Sep 06 '12 at 10:07
  • 1
    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
  • what do i have to exactly show, this is amusing – monk Sep 06 '12 at 10:41
  • 3
    and FWI it is not the duplicate one from the above question – monk Sep 06 '12 at 10:43
  • 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

9 Answers9

99
-webkit-appearance: none;

and add your own style

Hunter Turner
  • 6,313
  • 11
  • 34
  • 48
Sowmya
  • 25,313
  • 20
  • 91
  • 128
41
textarea, input { outline: none; }

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

Community
  • 1
  • 1
Nithin Emmanuel
  • 837
  • 1
  • 8
  • 18
14

Mixin for Less

.appearance (@value: none) {
    -webkit-appearance:     @value;
    -moz-appearance:        @value;
    -ms-appearance:         @value;
    -o-appearance:          @value;
    appearance:             @value;
}
Pesulap
  • 824
  • 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
8

use simple code for remove default browser style for outline

input { outline: none; }
Behnam Mohammadi
  • 5,246
  • 35
  • 32
6

In your CSS add this:

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

Only for Chrome! :)

Praveen Kumar Purushothaman
  • 154,660
  • 22
  • 177
  • 226
2

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

supersaiyan
  • 1,580
  • 5
  • 15
  • 35
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;
}
Adam
  • 1,827
  • 1
  • 10
  • 27
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; 
}
Keith Gulbro
  • 89
  • 5
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;  
}
brooksrelyt
  • 3,482
  • 4
  • 22
  • 42
Prajwal
  • 75
  • 9