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

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

这是你想要的。

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

Answer 5

这个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浏览器需要它。而有一些情况，当你需要它。