更改输入文本边框颜色而不更改其高度

Question

假设我有一个没有任何CSS的默认文本输入

<input type="text" />

我想将其边框颜色更改为红色,因此我添加了一种样式

<input type="text" style="border-color:red" />

之后边框是红色的,但它的大小是2px.如果我将边框更改为1px,则输入的高度将小于默认值.

如何将边框更改为1px并确保输入的真实高度(包括边框)与默认值相同？

Answer 1

使用它,它不会影响高度:

<input type="text" style="border:1px solid #ff0000" />

是的，它确实会影响高度，至少在 Firefox 72.0.1 中是这样。使用给定的边框样式，与没有该样式时显示的输入框相比，输入框的显示高度大大降低。 (2认同)

Answer 2

试试这个

<input type="text"/>

它将在所有跨浏览器中显示相同的内容,如mozilla,chrome和Internet Explorer.

<style>
    input{
       border:2px solid #FF0000;
    }
</style>

不要添加样式内联,因为它不是很好的做法,使用类为您的输入框添加样式.