不改变输入文本框高度的情况下更改其边框颜色

Question

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

<input type="text" />

我想将其边框颜色改为红色，因此我添加了一个样式

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

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

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

- user937450

---

添加一个像素的内边距吗？ - cHao

@cHao 是的，它会起作用。但问题是我不确定在所有浏览器中输入的 2px 边框宽度是否相同。 - user937450

所以决定在所有浏览器中 想要 保持一致的内容，并进行设置。 :) 在很多情况下，人们编写（或包含）的第一个规则是为了将样式“重置”到已知的一致状态，这是有原因的。 - cHao

Answer 1

使用此方法，不会影响高度：

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

- Atif Azad

---

是的，它确实会影响高度，至少在Firefox 72.0.1中是这样。使用给定的边框样式，输入框的高度显著降低，与没有样式时显示的高度相比。 - jimav

Answer 2

试一试

<input type="text"/>

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

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

不要添加内联样式，因为它不是良好的实践，使用类来为您的输入框添加样式。

- Devang Rathod

---

喜欢你说“试试这个......不要这样做”。如果你觉得这是不好的做法，有人可能建议你不要演示它。特别是在人们会投票的答案中。 :) Translated: 喜欢你说“试试这个......不要这样做”。如果你认为这是不好的做法，有人可能建议你不要展示它，尤其是在人们会对其进行投票的答案中。 :) - cHao

哦，过去七年里潮水已经转变了...如果你不再内联你的CSS，那么你就是一个异教徒！ - James Martin-Davies

Answer 3

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

.default{
border: 2px solid transparent;
}

.new{
border: 2px solid red;
}

- Michael Sazonov

Answer 4

这是您正在寻找的内容吗？

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

- Mayur Patil

---

这绝对不需要使用jQuery。 - TylerH

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*/
}

我知道在Firefox和Chrome上不需要，但是IE需要。而且有些情况下你会需要它。

- Tarun

Answer 6

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

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

}

- Ivan M