如何在不更改样式的情况下更改输入边框颜色？答案

【问题标题】：How do I change an inputs border colour without changing the style?如何在不更改样式的情况下更改输入边框颜色？
【发布时间】：2013-12-18 10:28:05
【问题描述】：

我正在尝试做一些非常简单的事情；更改输入的边框颜色。在 IE11 和最新的稳定版 Chrome 中，改变颜色也会改变它的外观（看起来 3D/更厚）：

如果我尝试“1px 纯红色”，则边框看起来相同，但大小会发生变化！

为什么改变颜色似乎不仅仅只是改变颜色
如何只更改颜色而不更改其他任何内容（样式、粗细、间距、大小等）

我试过弄乱边框宽度和其他属性，但它们都不会产生与默认值完全相同的大小/间距，只是颜色发生了变化:(

（请在发布之前尝试在 JSFiddle 中进行更改...很多人发布错误答案然后删除它们！http://jsfiddle.net/S2TxT/4/）

<input type="text" value="Default" />
<input type="text" style="border: 1px solid red" />

【问题讨论】：

你应该首先提到 chrome，所有答案都无缘无故被否决:)
@Mr.Alien 我做到了；我提到了 IE11 和 Chrome。可能不仅仅是这些浏览器，它们正是我正在使用并注意到的。
实际上你在 2-3 分钟后编辑，此时用户已经回答了..
@DannyTuppeny Danny - 只是对这一切的一个想法。我认为您永远不会在浏览器中获得相同的输入“而不更改任何其他内容（样式、厚度、间距、大小等）”。浏览器和输入都做了不同的事情，并且在更改属性时确实表现出一些“奇怪”（在逻辑和推理的世界中）行为。真正的答案是找到每个浏览器的规格——如果你真的想知道的话！无论如何，在下面提供了一个答案。
@LiverpoolsNumber9 我的问题中没有任何内容与跨浏览器看起来相同的事情有关。当我设置边框颜色时，我只是想了解为什么 IE11（或 Chrome）似乎改变了 other 而不是颜色。为什么 padding 会改变？我不是在追求一致性，我只是想在任何给定的浏览器中改变边框颜色:(

标签： html css

【解决方案1】：

在 IE11 和 Chrome 中，这让我找到了匹配框。

至于为什么...浏览器会是浏览器？

<input type="text" value="Default" />
<input type="text" value="Default" style="padding: 2px 1px; border: 1px solid red" />

http://jsfiddle.net/S2TxT/11/

编辑

经过进一步调查，很明显为什么会发生这种情况： http://jsfiddle.net/S2TxT/18/

【讨论】：

这是我能看到的最好的答案 - 避免了以前最好的硬编码高度（由于投票而被删除！）。我确实必须为填充设置“2px”而不是“2px 1px”，但这可能是由于 Bootstrap 或类似的一些默认设置。
优秀 :) 很高兴它满意。

【解决方案2】：

这是我能找到的解决问题的最简单方法。不幸的是，它涉及更改高度 CSS。疯了，我知道，只是为了改变边框颜色！

<input type="text" value="Default" />
<input type="text" style="border: 1px #cecece solid; padding: 2px; height: 16px;" />

http://jsfiddle.net/S2TxT/10/

【讨论】：

是的；这很好用 - 虽然看起来一旦添加填充后高度就变得不必要了:)

【解决方案3】：

向输入添加类： html：

<input class="border" />

css:

.border { border: 1px solid #ddd; /*you can write your hex code for color replacing #ddd*/}

【讨论】：

【解决方案4】：

我建议使用 FireBug lite 检查应用于这些输入元素的 CSS。

http://getfirebug.com/firebuglite

大多数浏览器都将自己的 CSS 设置为输入框的默认值，这至少可以说是令人讨厌的复杂。例如，Goole chrome 设置了一个嵌入边框，然后根据输入框的侧面以不同的方式覆盖它。

如果您查看输入元素的 Inspect Element Computed CSS 框，您将看到应用了什么以及如何覆盖它。

【讨论】：

IE11 和 Chrome 中的内置工具都无法显示此基本 CSS；你确定 Firebug 会更好吗？不想花时间在我的机器上安装不需要的垃圾并发现它是一样的：/
（我也很惊讶更改边框颜色如此困难！）
Firebug 优于任何浏览器中的任何东西。您必须使用 FireBug lite 的唯一原因是因为它是 IE。 Firefox 和 Chrome 都有完整版本。只需搜索 FireBug 就可以了。
即使这样，我也不确定它解释了为什么当我更改边框颜色时填充会发生变化:(

【解决方案5】：

使用下面的 CSS：

input{
    -moz-appearance:none;
    -webkit-appearance:none;
    appearance:none;
    border:1px solid grey;
}
input:last-child{
    border-color: red;
}

请注意，不同的浏览器会对元素应用不同的默认样式，这可能与您的预期相悖。

您可能希望考虑使用 CSS Reset 之类的东西，这样您就可以更轻松地预测在所有浏览器中应用您的 CSS 的结果。

You can also look at 将appearance:none; 应用于您的input 元素以直接覆盖特定于浏览器的样式。

查看HERE 以获得更全面的小提琴。

【讨论】：

这也不起作用；盒子变宽了，但没有高到与默认值匹配
@Danny Tuppeny：然后尝试从顶部和底部移除填充。而且这个功能会因浏览器而异。
您可能需要将input{-webkit-appearance: none;} 添加到您的CSS
@Ankur140290 我很感激它会有所不同；我不追求跨浏览器的一致性；只是想了解为什么在不弄乱其他所有内容的情况下更改边框颜色在 IE11 或 Chrome 中如此困难！ ://
@DannyTuppeny，您需要规范化输入的初始状态以覆盖浏览器默认值 - 请参阅 jsfiddle.net/PJ5SV/1

【解决方案6】：

你可以使用border-width和height属性(border-width:thin)

<input id="tdfre" style="border-color:red;border-width:thin;height:18px;padding:1px;" type="text"/><input type="text">

【讨论】：