Tweet

Pocket

セレクトボックスのスタイル指定も普通には指定できないので、こちらも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だけ綺麗にならないので、ハックで調整が必要。