css - 入力ボックスを変更するCSS

Question

いくつかの入力フィールドに必要な結果の画像を作成しました。

私がその結果を得ようとしたのはこれです：

input {
  padding-left: 2px;
  padding-top: 2px;
  height: 1.8em;
  font-size: 1em;
}

これを作成する際に私が抱えている問題は、テキストのサイズを変更して入力フィールドよりも比較的小さくするたびに、入力フィールドの高さもそれに応じて変化し、高さに注意を払っていないように見えることです。属性、フォントサイズのみ。

テキストを入力フィールドの高さの約60％にし、上記のように、左下隅にかなり近づけたいと思います。

誰かが私をこれに対して正しい方向に向けることができますか？

Answer 1

emはフォントのサイズ（ポイントサイズ）に基づいているため、フォントサイズを変更すると、高さ（指定したとおり）が変更されます。フォントサイズに依存しない場合は、ピクセルの高さを使用します。