更改输入文本边框颜色不改变它的高度

比方说，我有一个默认的文字输入不带任何CSS更改输入文本边框颜色不改变它的高度

<input type="text" />

我想改变它的边框颜色为红色，所以我添加一个风格

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

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

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

来源

2013-03-14 user937450

添加一个像素的填充？ – cHao 2013-03-14 08:29:00

@cHao是的，它会工作。但问题是，即时通讯不知道输入2px边框宽度是否在所有浏览器相同。 – user937450 2013-03-14 08:31:33

因此，请确定您希望*在所有浏览器中都相同，然后进行设置。 :)在很多情况下，人们编写（或包含）的第一条规则是将样式重置为已知的一致状态的原因之一。 – cHao 2013-03-14 08:32:30

试试这个

<input type="text"/>

它将如Mozilla，Chrome和Internet Explorer的所有跨浏览器的显示相同。

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

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

来源

2013-03-14 08:35:52

爱你如何说“试试.... **不要做这**”。有人可能会建议，如果你觉得这是不好的做法，你不会展示它。特别是在人们将投票的答案中。 :) – cHao 2013-03-14 08:37:45

赞同chao – 2013-03-14 08:55:00

内联样式是未来http://formidablelabs.com/blog/2015/03/01/launching-radium/ – ooolala 2015-05-06 13:09:24

利用这一点，它不会影响身高：

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

来源

2013-03-14 08:54:26

设置一个透明边框，然后改变它：

.default{ 
border: 2px solid transparent; 
} 

.new{ 
border: 2px solid red; 
}

来源

2013-03-14 08:55:17

这个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需要它。有时你需要它。

来源

2017-01-02 13:41:41 Tarun

这是你在找什么。

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

来源

2017-11-24 09:25:08

更改输入文本边框颜色不改变它的高度

回答

相关问题