html - 文本区域边框颜色没有完全改变

Question

我正在尝试将边框设为灰色，但出于某种原因只有 2 个“边缘”/一半的框 <input type="text">是灰色的，而 <textarea>边框没问题。

知道为什么会这样吗？两者具有相同的类 .fill-form-style

.fill-form-font {        
    padding: 8px;
    border-radius: 20px;
    border-color: gray;
    outline: none;
    font-size: 16px;
}

这是输入和文本区域的 HTML:

<input type="text" name="nickname" maxlength="22" size="25" class="fill-form-font">
<textarea name="content" cols="65" rows="10" style="resize: none;" class="fill-form-font"> Text Here </textarea>

Answer 1

使用 border-style:solid; 这将使边框不再是两种不同的颜色。

JSFiddle

多亏了一些乱七八糟的东西(还有评论中的 Paulie_D [谢谢!])，我发现这是因为 inset 边框样式。

您还可以使用速记 border，这意味着您的 css 行数更少。

border:1px solid #f00;

这是一个工作片段:

.fill-form-font{        
    padding: 8px;
    border-radius: 20px;
    border-color: red;
    border-style:solid;
    outline: none;
    font-size: 16px;
}

<input type="text" name="nickname" maxlength="22" size="25" class="fill-form-font" >
<textarea name="content" cols="65" rows="10" style="resize: none;" class="fill-form-font"> Text Here </textarea>