type=rangeのinput要素を上下揃えする方法

2017/06/22

range(範囲選択)のinput要素は、高さを付けた時に垂直方向で上部に配置されるため、他の要素と並べた時に上下が揃わず見栄えが悪いです。vertical-alignプロパティにmiddleを指定することで解決します。

サンプルコード

input[type=range] {
	vertical-align: middle ;
}

デモ

上下揃えするには、rangeの入力フォームに、vertical-align: middleを指定します。

指定した場合

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
input {
	width: 100px ;
	height: 50px ;
}

input[type=range] {
	vertical-align: middle ;
}
	</style>
</head>
<body>
	<p>上下揃えになっています。</p>
	<input type="text">
	<input type="range">
</body>
</html>

指定しない場合

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
input {
	width: 100px ;
	height: 50px ;
}

input[type=range] {
	
}
	</style>
</head>
<body>
	<p>上下揃えになっていません。</p>
	<input type="text">
	<input type="range">
</body>
</html>