How to remove default chrome style for select Input?

HtmlCss

Html Problem Overview

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?

Html Solutions

Solution 1 - Html

-webkit-appearance: none;

and add your own style

Solution 2 - Html

textarea, input { outline: none; }

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

Solution 3 - Html

Mixin for Less

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

Solution 4 - Html

use simple code for remove default browser style for outline

input { outline: none; }

Solution 5 - Html

In your CSS add this:

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

Only for Chrome! :)

Solution 6 - Html

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

Solution 7 - Html

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

Solution 8 - Html

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

Solution 9 - Html

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

Solution 10 - Html

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

Categories
Recommended Html Solutions
Recommended Css Solutions

Previous Solution:

Any reason to prefer CefSharp over CefGlue (or vice-versa)?

.NetWebkitC++ CliPinvokeChromium

Next Solution:

javax.annotation: @Nullable vs @CheckForNull

JavaAnnotationsStatic AnalysisFindbugs

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionmonkView Question on Stackoverflow
Solution 1 - HtmlSowmyaView Answer on Stackoverflow
Solution 2 - HtmlNithin EmmanuelView Answer on Stackoverflow
Solution 3 - HtmlPesulapView Answer on Stackoverflow
Solution 4 - HtmlBehnam MohammadiView Answer on Stackoverflow
Solution 5 - HtmlPraveen Kumar PurushothamanView Answer on Stackoverflow
Solution 6 - HtmlsupersaiyanView Answer on Stackoverflow
Solution 7 - HtmlAdamView Answer on Stackoverflow
Solution 8 - HtmlKeith GulbroView Answer on Stackoverflow
Solution 9 - HtmlPrajwalView Answer on Stackoverflow
Solution 10 - HtmlAthif SaheerView Answer on Stackoverflow