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

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

Answer 2

尝试这个

<input type="text"/>

它将在所有跨浏览器（如 mozilla、chrome 和 Internet Explorer）中显示相同。

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

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

Answer 3

设置透明边框，然后更改它：

.default{
border: 2px solid transparent;
}

.new{
border: 2px solid red;
}

Answer 4

这个css解决方案对我有用：

input:active,
input:focus {
    border: 1px solid #red
}

input:active,
input:focus {
    padding: 2px solid #red /*for firefox and chrome*/
}

/* .ie is a class you would need to set at the html root level */
.ie input:active,
.ie input:focus {
    padding: 3px solid #red /* IE needs 1px extra padding*/
}

我知道在 FF 和 Chrome 上没有必要，但 IE 需要它。在某些情况下您需要它。

Answer 5

这是你想要的。

$("input.address_field").on('click', function(){  
     $(this).css('border', '2px solid red');
});

Answer 6

这在类似的情况下对我有用：

input:focus { 
   outline-offset: -2px; // negative value to 'squeeze' it inside 
   outline-color: orangered; // new desired color

}