line-heightが効かない

Question

レスポンシブデザインを作っている中で。line-heightに関してわからない事が出てきたので、この場を借りて質問させていただきます。
ddの中に、labelタグとinputタグを入れてお互い高さが合うように、配置してあげたいのですが、うまくいきません。そこで、labelタグとinputタグのline-heightを同じにしようとして、
両方をline-height:100%;で指定や、適当に　　line-height:30pxで指定してみましたがうまくいきませんでした。

質問したい事
①inputタグはline-heightを指定する事ができないんでしょうか？
②inputタグのline-heightがどれくらいの大きさなのかどうやって調べる事ができますか？
⓷ddの中にlabelタグとinputタグを入れて高さが同じになるために、いいタグの格納方法はありますか？

<dl class="update-form">
<dd>
<label class="text-right col-sm-3" for="last-name">姓（必須）</label>
<input type="text" class="last-name col-sm-9" placeholder="姓" value="山田">
</dd>
<dd>
<label class="text-right col-sm-3" for="first-name">名（必須）</label>
<input type="text" class="first-name col-sm-9" placeholder="名" value="太郎">
</dd>
<dd>
<label class="text-right col-sm-3 gender1" for="gender">性別</label>
<select class="gender">
<option value="">性別</option>
<option value="1">男</option>
<option value="2">女</option>
<option value="3">その他</option>
</select>
</dd>
<dd>
<label class="text-right col-sm-3" for="birthday">生年月日</label>
<select class="birthday year rs1">
<option value="">年</option>
<option

Answer 1

apperance: noneでテキストボックス固有の見た目を切ったら如何でしょうか？スタイル付けが簡単になるかもしれません.

https://developer.mozilla.org/ja/docs/Web/CSS/-moz-appearance

input{
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
	border: none;
	font-size: 1em;
	background-color: yellow;
}

<label>ラベル<input value="テキスト"/></label>

Comments

[revoiot]

ご回答いただきありがとうございます。ぜひ使わせていただきます！貴重な情報ありがとうございます。
大変恐れ入りますが、以下の質問にも答えていただく事は可能でしょうか？

質問したい事
①inputタグはline-heightを指定する事ができないんでしょうか？
②inputタグのline-heightがどれくらいの大きさなのかどうやって調べる事ができますか？
⓷ddの中にlabelタグとinputタグを入れて高さが同じになるために、いいタグの格納方法はありますか？

[defghi1977]

input要素にはそのままでは規定のスタイル(システム設定から引き継がれるもので, ブラウザからは非常に扱い憎いもの)が定義されていて, この束縛を切るスタイルが上で挙げた appearance:noneなのです. ですからこのスタイルを設定すると, 比較的容易に他のノードと同じようなスタイル付けが可能となります.
つまり, ①〜③が解決するんじゃね？と申し上げているんです.
（②についてはJavaScriptからgetComputedStyleを呼び出すことで取得できます）

[revoiot]

非常にわかりやすい説明ありがとうございます！！！アドバイスもいただき、助かりました！