Question

我想使用颜色#644220作为输入字段的边框。我试过这样的话：

HTML

<input class="my_border" type="text">

CSS

.my_border {
    width:100%;
    padding: 20px;
    outline: none;
    border-width: 0 0 1px 50px;
    border-color: #644220;
}

https://jsfiddle.net/9dss92v6/1/

当我使用red或任何其他HEX代码时，它对我有用。它不仅会接受代码#644220。 #644220是现有的颜色here。

甚至RGB代码（border-color: rgb(100, 66, 32);）都没有工作。

它出了什么问题？

Answer 1

来自MDN：

注意：border-style的默认值为none。这意味着如果您更改了border-width和border-color，您将看不到除非您将此属性更改为none或者以外的其他属性隐藏。

现在我假设浏览器没有遵循这一点，默认情况下它们会显示一些固定的默认border。 ^[1]

您需要为style定义border，例如solid

border-style: solid;

Demo

^[1]进一步发挥这一点，我认为从浏览器的角度来看这是一种奇怪的行为。如果我使用red或tomato这样的字作为颜色名称，它仍可用，但颜色不是我们期望的颜色，例如this vs this

如果我有任何可靠的推理，我会更新这个帖子。

编辑3：

进一步调试，事实证明，Chrome为inset设置的默认值为border，即border-style: inset;，其边框呈灰色，就像阴影一样。因此，您的color会进行渲染，但会与Chrome默认设置的inset边框混合。现在我不确定为什么颜色没有被样式表中的color声明覆盖，可能是一个错误。

Answer 2

为其添加border-style：

.my_border {
    width:100%;
    padding: 20px;
    outline: none;
    border-width: 0 0 1px 50px;
    border-color: #644220;
    border-style: solid;
}

Answer 3

您可能希望将边框的属性组合在一行中，如下所示：

.my_border {
    width:100%;
    padding: 20px;
    outline: none;
    border: 10px solid #644220;
}

您始终可以更改边框的粗细。我在10px中创建了它，因此它可见。

border-color忽略了我的颜色

3 个答案: