html - 高さを変更せずに入力テキストの境界線の色を変更する

Question

CSSのないデフォルトのテキスト入力があるとしましょう

<input type="text" />

境界線の色を赤に変更したいので、スタイルを追加します

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

その後、境界線は赤になりますが、そのサイズは 2px です。境界線を 1px に変更すると、入力の高さがデフォルトよりも小さくなります。

境界線を 1px に変更して、入力 (境界線を含む) の実際の高さがデフォルトと同じであることを確認するにはどうすればよいですか?

score 30 · Accepted Answer

これを使用すると、高さには影響しません:

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

score 2 · Accepted Answer

透明な境界線を設定してから変更します。

.default{
border: 2px solid transparent;
}

.new{
border: 2px solid red;
}

6 に答える 6