更改輸入文本邊框顏色不改變它的高度

比方說，我有一個默認的文字輸入不帶任何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

更改輸入文本邊框顏色不改變它的高度

回答

相關問題