Html 如何删除选择输入的默认镀铬样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12297600/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove default chrome style for select Input?
提问by monk
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?
如何删除选定输入的默认黄色框边框并选择 chrome 或任何浏览器（如 safari）中的字段？我想使用自定义框阴影 css 自定义输入。如何删除默认浏览器选择边框？
回答by Sowmya
-webkit-appearance: none;
and add your own style
并添加您自己的风格
回答by Nithin Emmanuel
textarea, input { outline: none; }
回答by Pesulap
Mixin for Less
Mixin 少
.appearance (@value: none) {
-webkit-appearance: @value;
-moz-appearance: @value;
-ms-appearance: @value;
-o-appearance: @value;
appearance: @value;
}
回答by Behnam Mohammadi
use simple code for remove default browser style for outline
使用简单的代码删除大纲的默认浏览器样式
input { outline: none; }
回答by Praveen Kumar Purushothaman
In your CSS add this:
在你的 CSS 中添加：
input {-webkit-appearance: none; box-shadow: none !important; }
:-webkit-autofill { color: #fff !important; }
Only for Chrome!:)
仅适用于 Chrome！:)
回答by supersaiyan
input:-webkit-autofill { background: #fff !important; }
输入：-webkit-autofill { 背景：#fff !important; }
回答by Prajwal
Before Applying Property box-shadow : none
应用属性 box-shadow 之前：无
After Applying Property box-shadow : none
应用属性 box-shadow 后：无
This is the easiest solution and it worked for me
这是最简单的解决方案，它对我有用
input {
box-shadow : none;
}
回答by Keith Gulbro
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;
}
回答by Adam
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;
}
