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

Question

如何删除所选输入的默认黄色框边框并选择chrome或任何浏览器（如safari）中的字段？ 我想用自定义框阴影css自定义输入。如何删除默认的浏览器选择边框？

Answer 1

-webkit-appearance: none;

并添加自己的风格

Answer 2

textarea, input { outline: none; }

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

Answer 3

Mixin for Less

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

Answer 4

在你的CSS中添加：

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

仅适用于Chrome！：）

Answer 5

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

input { outline: none; }

Answer 6

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

Answer 7

查看带有数字类型的输入时，您会注意到输入字段右侧的微调按钮（上/下）。这些微调器并非总是可取的，因此下面的代码删除了这种样式，以渲染类似于文本类型的输入。

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

Answer 8

您是在谈论何时点击输入框，而不是将鼠标悬停在输入框上？这为我解决了这个问题：

input:focus {
   outline: none;
   border: specify yours;
}

Answer 9

在应用属性框阴影之前：无

在应用属性框阴影之后：无

这是最简单的解决方案，对我有用

input {
   box-shadow : none;  
}

Answer 10

当您单击输入框时，您可以看到默认样式。您想删除它并添加自己的样式，然后应用以下代码...

方法一：

input:focus {
    outline: none;
 }

方法二：

input:focus, textarea:focus, select:focus{
        outline: none;
}

希望对你有用...