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需要它。在某些情况下你需要它。

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

5 个答案: