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