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

Question

我正在尝试将边框设为灰色，但由于某些原因只有 2 "edges" / 一半的框 <input type="text"> 是灰色的，而 <textarea> 边框很好。

知道为什么会这样吗？两者具有相同的 class .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

解决方案...

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

https://jsfiddle.net/ew2orox0/ 实例

Answer 2

使用border-style:solid;这将阻止边框成为两种不同的颜色。

JSFiddle

多亏了一些乱七八糟的东西（以及 Paulie_D 在评论中 [谢谢！]）我发现这是因为 inset 边框样式。

您也可以使用 shorthand 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>

Answer 3

那是因为 User Agent Style。您需要使用 border 来覆盖用户代理边界。示例：

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

<input type="text" name="nickname" maxlength="22" size="25" class="fill-form-font">

<textarea name="content" cols="60" rows="10" style="resize: none;" class="fill-form-font"> Text Here </textarea>

Answer 4

默认情况下，浏览器用户 border-style: inset;，您应该将其更改为使用 border-style: solid。您可以仅在一行中添加属性或使用 border 定义： border: 1px solid gray; /* I set 1px but chrome, by default, sets 2px */

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

Textarea border color not changing completely

html

css

border