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

关键词：

【中文标题】如何删除选择输入的默认镀铬样式？【英文标题】：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

如何删除所有默认的 Webkit 搜索字段样式？

】如何删除所有默认的Webkit搜索字段样式？【英文标题】：HowdoIremovealldefaultWebkitsearchfieldstyling?【发布时间】：2012-03-1408:38:38【问题描述】：默认情况下，<inputtype="search"/>在MacOSX上呈现为“本机”搜索字段（圆... 查看详情

重置/删除所有浏览器（包括移动设备）上的输入、选择和按钮的所有样式

...206:51:34【问题描述】：我已经搜索过这个，但我只能找到如何更改/修改输入、选择和按钮元素的样式。我想要做的是在所有浏览器和移动设备上删除除值本身之外的所有阴影、边框 查看详情

如何删除默认的 Storybook Canvas 样式？

】如何删除默认的StorybookCanvas样式？【英文标题】：HowtoremovedefaultStorybookCanvasstyles?【发布时间】：2021-03-2914:30:59【问题描述】：Storybook将默认样式应用于故事画布iframe。这会阻止我的故事看起来像他们应该的样子。如何摆脱Story... 查看详情

如何从输入文本中删除底线

】如何从输入文本中删除底线【英文标题】：HowtoremovebottomlinefromInputtext【发布时间】：2017-11-2307:06:39【问题描述】：我正在使用Materialize进行angular2项目我已经为txt输入做了一个自定义样式，但是当用户选择输入时我无法理解底... 查看详情

如何避免 Vuetify 覆盖默认 CSS

】如何避免Vuetify覆盖默认CSS【英文标题】：HowtoavoidVuetifyoverridesdefaultCSS【发布时间】：2019-06-1501:00:21【问题描述】：总结问题我正在尝试将Vuetify实施到现有项目的一部分。但是在我将Vuetify添加到项目之后。我发现类似输入字段... 查看详情

如何在 vue 中隐藏日期选择器的默认日历图标

】如何在vue中隐藏日期选择器的默认日历图标【英文标题】：Howtohidedefaultcalendariconfromdatepickerinvue【发布时间】：2022-01-1408:11:05【问题描述】：我在vue中有一个输入组件，我将类型作为日期给出。如您所见，黑色图标是html的默认... 查看详情

如何去除jquerymobile的css样式

是指默认的样式吗，是的话有两种方法将data-role的取值改为none。找到JQueryMobile默认样式的类选择器或是ID选择器，在JQueryMobile的css文件找到删除或者不删除，在样式里重写但是后面加上!important作用是提高指定CSS样式规则的应用... 查看详情

如何删除输入类型中的默认颜色？

】如何删除输入类型中的默认颜色？【英文标题】：Howtoremovedefaultcolorininputtype?【发布时间】：2017-05-1215:55:08【问题描述】：我已经创建了输入类型并为该框创建了边框，但是当我单击该按钮时，它显示的是默认颜色，但我不应... 查看详情

如何从 SwiftUI 中的图形样式 DatePicker 中删除侧边距？

】如何从SwiftUI中的图形样式DatePicker中删除侧边距？【英文标题】：HowtoremovethesidepaddingfromtheGraphicalStyleDatePickerinSwiftUI?【发布时间】：2020-11-1909:15:54【问题描述】：从下面的屏幕截图中可以看到，GraphicalDatePickerStyle日期选择器默... 查看详情

如何在开始输入后删除 HTML 输入框的默认文本

】如何在开始输入后删除HTML输入框的默认文本【英文标题】：HowdoImakeaHTMLinputboxdefaulttextremoveAFTERstartingtotype【发布时间】：2012-09-0704:15:12【问题描述】：假设我有一个输入框，其中包含默认文本“名称”。我希望用户单击该框，... 查看详情

删除表单元素上的默认浏览器样式

】删除表单元素上的默认浏览器样式【英文标题】：Removedefaultbrowserstylesonformelements【发布时间】：2010-09-0109:12:47【问题描述】：注意：我尝试在google上搜索，但找不到我要找的东西。浏览器有一些用于呈现表单元素的默认样式... 查看详情

如何删除正文周围的边距空间或清除默认 CSS 样式

】如何删除正文周围的边距空间或清除默认CSS样式【英文标题】：Howtoremovemarginspacearoundbodyorcleardefaultcssstyles【发布时间】：2012-03-2118:46:32【问题描述】：诚然，我是初学者，但在发布此内容之前，我也进行了大量搜索。我的div... 查看详情

如何删除/选择电脑上的输入法

一、删除输入法，按下图操作：二、选择输入法，按下图操作： 查看详情

PyQt5 QTableView：如何在保持默认样式/颜色的同时禁用用户交互/选择？

】PyQt5QTableView：如何在保持默认样式/颜色的同时禁用用户交互/选择？【英文标题】：PyQt5QTableView:howtodisableuserinteraction/selectionwhilekeepingthedefaultstyle/colors?【发布时间】：2019-04-1312:13:49【问题描述】：我需要能够以编程方式选择Tab... 查看详情

Symfony 2 - 如何删除日期字段类型的默认日期选择器？

】Symfony2-如何删除日期字段类型的默认日期选择器？【英文标题】：Symfony2-HowtoremovethedefaultdatepickeroftheDateFieldType?【发布时间】：2012-12-3022:43:15【问题描述】：在我的formType中，我使用以下内容来呈现我的日期字段类型。$builder-&g... 查看详情

如何删除取消win7系统文件的“始终使用选择的程序打开这种文件”，让原类别文件恢复默认的未知格式？

如何删除取消win7系统文件的“始终使用选择的程序打开这种文件”，让原类别文件恢复默认的未知格式？得修改系统注册表：①运行注册表：开始>运行>输入：regedit ②打开目录：HKEY_CLASSES_ROOT找到你的文件类型的夹子，... 查看详情

css如何恢复到默认样式？

在外层改变了设置，在内部怎么恢复到默认呢？比如：*margin:0;padding:0;全部元素都没有了内外边距，但是在某个区域我想让其以浏览器默认样式显示，可以吗？有时候在写CSS的过程中，某些限制总是不起作用，这就涉及了CSS样式... 查看详情

如何更改android中的数字选择器样式？

】如何更改android中的数字选择器样式？【英文标题】：howtochangenumberpickerstyleinandroid?【发布时间】：2013-02-0812:14:50【问题描述】：我想使用NumberPicker组件小部件，但在默认的Holo主题中，我需要将蓝色替换为橙色，因为这是我样... 查看详情