Question

我试图让边框变灰，出于某种原因只有2＆＃34;边缘＆＃34; /一半的盒子 <{1}}是灰色的，<input type="text">边框很好。

知道为什么会这样吗？两者都有相同的班级<textarea>

.fill-form-style

这是输入和textarea的HTML：

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

Answer 1

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

JSFiddle

感谢一些混乱（和评论中的Paulie_D [谢谢！]）我发现它是因为inset边框样式。

你也可以使用简写border，这意味着你的css中的行数较少。

border:1px solid #f00;

这是一个工作片段：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

那是因为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 3

...解

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

https://jsfiddle.net/ew2orox0/直播示例

Answer 4

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

Textarea边框颜色没有完全改变

4 个答案: