Edgeでline-heightやpaddingが効かない

Question

フォームを作成していますが入力欄に高さを出したいと思い、

<form>配下の<input>タグに ``` input[type="text"] ,input[type="email"] { line-height: 36px; } ``` もしくは、 ``` input[type="text"] ,input[type="email"] { padding: 10px 10px 10px; } ``` をCSSで指定しているのですが、chromeではどちらも同じような見た目になるのにedgeだとどちらも効かず1行分の高さになってしまいます。

元々paddingを使っていましたが、これだとedgeで効かないので調べてみたところ、line-heightを使えば良いという情報があったためline-heightを使いましたがダメでした。

edgeでも効かせるための条件や書き方はあるのでしょうか。

Comments

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

Answer 1

こちらだといかがでしょうか?

input[type="text"],
input[type="email"] {
  padding: 10px;
  line-height: 1;
}

---

↓追加しました。普段使い回しているソースをそのまま持ってきたので、古いかもしれませんが試してみてほしいです。

select,
option,
textarea,
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="file"],
input[type="date"],
input[type="submit"],
input[type="button"],
input[type="reset"],
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
}
input::-moz-focus-inner,
button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

Comments

[begginer_class]

ありがとうございます。
早速試してみましたが、
左側のpaddingのみ10px入っているようで、上下右のpadding及びline-heightは効いていません。

[new1ro]

追記しました。
「appearance: none;」が必要かもしれません。

[begginer_class]

ありがとうございます。
何か他の箇所のCSSと競合している可能性を考えたところ、「box-sizing: border-box;」が気になったので削除してみたら効くようになりました。
無知で、このCSSが何か影響を及ぼすことは考えていませんでした。

ありがとうございました。