Textarea邊框顏色沒有完全改變

Question

我試圖將邊框設置為灰色，並且出於某些原因， <input type="text">的框只有2個“邊緣” /一半是灰色，而<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> 

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 */ border: 1px solid gray; /* I set 1px but chrome, by default, sets 2px */