Html 更改输入文本边框颜色而不更改其高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15404330/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change input text border color without changing its height
提问by user937450
Let's say I have a default text input without any CSS
假设我有一个没有任何 CSS 的默认文本输入
<input type="text" />
I want to change its border color to red so I add an style
我想将其边框颜色更改为红色，所以我添加了一个样式
<input type="text" style="border-color:red" />
After that the border is red, but its size is 2px. If I change the border to 1px the height of the input will be smaller than a default one.
之后边框为红色，但其大小为2px。如果我将边框更改为 1px，则输入的高度将小于默认值。
How can I change my border to 1px and assure that the true height of the input (including the border) is the same as an default one?
如何将边框更改为 1px 并确保输入（包括边框）的真实高度与默认高度相同？
回答by Atif Azad
use this, it won't effect height:
使用这个，它不会影响高度：
<input type="text" style="border:1px solid #ff0000" />
回答by Devang Rathod
Try this
尝试这个
<input type="text"/>
It will display same in all cross browser like mozilla , chrome and internet explorer.
它将在所有跨浏览器（如 mozilla、chrome 和 Internet Explorer）中显示相同。
<style>
input{
border:2px solid #FF0000;
}
</style>
Dont add style inline because its not good practise, use class to add style for your input box.
不要添加样式内联，因为它不是很好的做法，请使用类为您的输入框添加样式。
回答by Michael Sazonov
Set a transparent border and then change it:
设置透明边框，然后更改它：
.default{
border: 2px solid transparent;
}
.new{
border: 2px solid red;
}
回答by Mayur Patil
Is this what you are looking for.
这是你想要的。
$("input.address_field").on('click', function(){
$(this).css('border', '2px solid red');
});
回答by Tarun
This css solution worked for me:
这个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*/
}
I understand it is not necessary on FF and Chrome, but IE needs it. And there are circumstances when you need it.
我知道在 FF 和 Chrome 上没有必要，但 IE 需要它。在某些情况下，您需要它。
