さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【CSS】セレクトボックスのスタイル指定

Pocket
LINEで送る

セレクトボックスのスタイル指定も普通には指定できないので、こちらもlabelを利用する。

html

<label class="selectLabel" for="selectTest">
	<select name="selectTest" id="selectTest">
		<option value="">選択してください</option>
		<option value="1">あああああ</option>
		<option value="2">いいいいい</option>
		<option value="3">ううううう</option>
		<option value="4">えええええ</option>
		<option value="5">おおおおお</option>
	</select>
</label>

scss

select {
	margin:0;
	height:40px;
	width:200px;
	padding:5px;
	box-sizing: border-box;
	border:1px solid #ccc;
}

select::-ms-expand {
	display: none;
}

label.selectLabel {
	position:relative;
	display: inline-block;
	width:200px;
	height:40px;

	&:after {
		display: block;
		content: " ";
		position: absolute;
		top: 50%;
		right:1px;
		width: 30px;
		height: 38px;
		margin-top: -19px;
		background:#fff url(img/common/select_icon.png) no-repeat center center;
		background-size: 16px;
		pointer-events: none;
	}

	@-moz-document url-prefix() { /* firefox */
		&.second {
			&:after {
				height: 40px;
				top:19px;
				right: 0;
				box-sizing: border-box;
				border: 1px solid #ccc;
				border-left: none;
			}
		}
	}
}

@media screen and (-webkit-min-device-pixel-ratio:0) { /* safari */
	::i-block-chrome, select {
		width: 197px;
		border: none;
	}
	
	::i-block-chrome, label.selectLabel {
		padding:10px 0;
		box-sizing: border-box;
		background-color: #fff;
		border:1px solid #ccc;
		
		&:after {
			height:32px;
			margin-top:-14px;
		}
	}
}

safariだけ綺麗にならないので、ハックで調整が必要。

カテゴリー:css, HP制作

コメントを残す

コメント内容