HTML输入默认的Chrome边框颜色覆盖无法使用CSS

Question

仅当我使用完整边框声明时，它才有效。 不起作用：

border-color: red;

工作：

border: 1px solid red;

代码示例：

 /* Styles go here */ .example1 { border-color: red; /* not good */ } .example2 { border: 1px solid red; /* works well */ } 

  <input class="example1"> <br> <br> <input class="example2"> 

Answer 1

为了以这种方式使用border-color ，您需要设置宽度和样式：

border-color: red;
border-style: solid;
border-width: 15px;

另外，您可以设置border: 1px solid blue; 然后，使用border-color: red;仅覆盖border-color: red; 。 这行得通，但是仅因为已经设置了wodth和style。

Answer 2

如果不提供其他边框属性，浏览器的用户代理样式表中的样式将应用于该元素。

在第一个示例中，如果在开发人员工具中进行检查，它将显示border-style:inset继承。

Answer 3

在编写border:这是所有边框样式的简写属性。 因此，当您编写border: 1px solid red它变为：

.example2 {
  border: 1px solid red;/* Becomes: */
  border-width: 1px;
  border-style: solid;
  border-color: red;
}

但是，当您仅指定颜色时，浏览器不知道输入应具有的其他样式，因此它使用默认样式。

.example1 {
  border-width: /* Uses default */
  border-style: /* Uses default */
  border-color: red;
}

有两种方法可以使您更轻松地自定义输入框。 您可以选择所有输入类型并使它们具有通用边框，然后使用类指定更特定的样式。

 input[type=text] { border: 1px solid red; } input.red-border { border-color: red; } input.blue-border { border-color: blue; } 

 <input type="text" class="red-border" value="I am Red"></input> <input type="text" class="blue-border" value="I am Blue"></input> 

但是，我不确定这是否回答了您的问题，因为似乎两个输入都带有红色边框。 尝试通过一些示例来更好地格式化问题，这些示例将更详细地说明您要实现的目标。

希望这可以帮助！