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

Posted 2023-03-05

【中文标题】如何删除选择输入的默认镀铬样式？

【英文标题】：How to remove default chrome style for select Input?

【发布时间】：2012-08-31 03:02:48

【问题描述】：

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

【问题讨论】：

使用背景图片，盒子阴影等

重复***.com/questions/2920306/…

是的，这是重复的问题，请务必在发布前尝试搜索或找到解决方案。

他们都没有工作，我的问题是减一，太棒了

和 FWI 它不是上述问题的重复项

【参考方案1】：

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

【参考方案2】：

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

方法一：

input:focus 
    outline: none;
 

方法二：

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

希望你对这个有用...

【讨论】：

虽然这可以回答这个问题，但我看不出与现有答案有任何区别。

【参考方案3】：

在应用属性之前 box-shadow : 无

应用属性后 box-shadow : 无

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

input 
   box-shadow : none;  

【参考方案4】：

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

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

【讨论】：

你能解释一下这个解决方案吗？

@TobiasTheel 是的，请看我修改后的答案。

谢谢，稍微解释一下会更好:)

【参考方案5】：

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

input  outline: none; 

【参考方案6】：

-webkit-appearance: none;

并添加自己的风格

【参考方案7】：

混入更少

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

【讨论】：

没有边框技巧不一定能工作（见我的评论），但除此之外，为什么不写更少的 LESS（对不起；）.appearance -webkit-appearance: none; -moz-appearance: none; and so on

@henry 为什么要禁止自己设置特定值？这样mixin就更有用了。但当然，对于 OP 请求就足够了。

【参考方案8】：

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

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

【参考方案9】：

textarea, input  outline: none; 

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

【讨论】：

所有供应商前缀都不适合我。似乎outline: none 现在是处理此问题的默认方式？

这不会删除图标背景图像/图标

只有这个也对我有用！谢谢

【参考方案10】：

在你的 CSS 中添加：

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

仅适用于 Chrome！ :)

【讨论】：

... 以及 Safari 和 Opera 以及此列表中的所有其他浏览器 en.wikipedia.org/wiki/List_of_web_browsers#WebKit-based :-)

@Julian 虽然我写了这个答案，但我并没有意识到这一点。 ：） 不管怎么说，多谢拉。 :D