Как сделать все границы одного и того же цвета?

Question

У меня простая форма, с текстовыми полями, которые я пытаюсь использовать в одном цвете. По какой-то причине левая и верхняя границы появляются немного по-другому, что кажется теневой. Как я могу избавиться от него?

Я использую это (соответствующий) CSS, чтобы стиль текстовых полей:

input[type="text"] { 
    border-color: red; 
    border-width: 2px; 
} 

Результат таков:

Я также попытался добавить этот кусок кода , но не повезло:

-webkit-box-shadow: none; 
-moz-box-shadow: none; 
box-shadow: none; 

Любая помощь будет очень признательна. Благодаря!

Answer 1

Добавить border-style:solid;

input[type="text"] { 
 
    border-color: red; 
 
    border-width: 2px; 
 
    border-style:solid; 
 
}

<input type="text"/>

Я считаю, что "вставка" по умолчанию для многих браузеров для текстовых входов.

Answer 2

Это обусловлено стилем ввода по умолчанию, применяемым вашим браузером, который устанавливает border-style в inset. Вы можете получить желаемый стиль и упростить правила CSS, изменив CSS на:

input[type="text"] { 
 
    border:2px solid red; 
 
}

<input type="text" /> 
 
<br/><br/> 
 
<input type="text" />