如何删除选择输入的默认chrome样式？

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自定义输入。如何删除默认浏览器选择边框？

7 个解决方案

#1

-webkit-appearance: none;

and add your own style

并添加自己的风格

#2

textarea, input { outline: none; }

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

通过https://*.com/a/935572/1036298

#3

Mixin for Less

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

#4

In your CSS add this:

在你的CSS中添加：

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

Only for Chrome! :)

仅适用于Chrome！ :)

#5

use simple code for remove default browser style for outline

使用简单代码删除大纲的默认浏览器样式

input { outline: none; }

#6

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

输入：-webkit-autofill {background：#fff！important; }

#7

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

#1

-webkit-appearance: none;