html - 如何删除选择输入的默认镀铬样式？

Question

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

score 104 · Accepted Answer

104

-webkit-appearance: none;

并添加自己的风格

于 2012-09-06T10:05:57.253 回答

score 44 · Accepted Answer

44

textarea, input { outline: none; }

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

于 2012-09-06T10:08:51.073 回答

score 14 · Accepted Answer

混入更少

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

score 8 · Accepted Answer

8

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

input { outline: none; }

于 2014-04-07T12:46:39.057 回答

score 6 · Accepted Answer

在你的 CSS 中添加：

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

仅适用于 Chrome！:)

score 2 · Accepted Answer

2

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

于 2012-09-06T10:06:48.013 回答

score 1 · Accepted Answer

您是在谈论单击输入框时，而不是仅仅将鼠标悬停在它上面吗？这为我修复了它：

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

score 1 · Accepted Answer

应用属性之前 box-shadow : 无

应用属性 box-shadow 后：无

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

input {
   box-shadow : none;  
}

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

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

方法一：

input:focus {
    outline: none;
 }

方法二：

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

希望对你有用...

html - 如何删除选择输入的默认镀铬样式？

10 回答 10

Related

Reference