html - 更改 input[type=text] 上灰色 "border"的颜色

Question

是否可以在不使用 CSS 更改边框粗细的情况下更改文本输入周围灰色“边框”的颜色？

我最初认为使用 border-color将允许我更改颜色，但是，如下面的图像/代码示例所示，更改颜色似乎也会使边框变粗。我想保留默认宽度(2px)但更改边框的颜色。

该图像是下面代码片段的放大屏幕截图，以突出显示颜色更改时边框粗细的明显变化。

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
}

input[type=text] {
  flex: 1 1 0;
  margin-bottom: 2px;
}

.different_color {
  border-color: red;
}

<div class="container">
  <input type="text">
  <input type="text" class="different_color">
</div>

编辑

澄清一下，默认边框，根据开发者控制台有一个 border-width 2px 似乎仅作为 2px 的一部分呈现，同时仍然基本上用固定的 2px 填充内容。但是，当我在边框上设置颜色时，它不再只渲染这一小部分，而是整个 2px。下图显示了这一点，图像的左侧是默认边框，图像的右侧是带有 border-color 的边框。设置为红色。

Answer 1

更改 border-color不会改变border-width本身。

但您可能已经注意到，默认情况下，MacOS 上的表单元素与 Windows 10 上的表单元素不同。这是因为无样式的表单元素是使用平台原生样式呈现的。如果您检查无样式 <input>在 Chrome 或 Firefox 中查看浏览器应用的规则集，你会看到输入有 -webkit-appearance: textfield或 -moz-appearance: textfield分别。这使得浏览器应用这些平台特定的样式，这些样式甚至会覆盖浏览器的默认设置。

(在 Firefox 中，您可以使用 appearance 属性并使 <div> 呈现为原生样式的输入元素，并通过添加 <span> 属性使 appearance 看起来像一个按钮，如下面的代码片段演示)

div {
  display: block;
  width: 100px;
  height: 20px;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
span {
  display: block;
  width: 100px;
  height: 20px;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}

<div></div>
<span></span>

一旦您开始为表单元素设置样式，就会发生 appearance规则集将被删除，浏览器将改为应用浏览器默认值。至于输入元素，它有 border-style: inset和 border-width: 2px默认在 Chrome 中。这就是你所看到的。这就是为什么更改颜色后宽度和样式也会改变的原因。这就是为什么您不能只更改边框颜色的原因。

您将必须手动“设置样式”以模拟平台 native 表单元素。