Edited at

select(プルダウン) の文字を左右中央揃えにしたいときのCSSメモ

More than 3 years have passed since last update.


select に text-align:centerは効かない

select タグのテキストを左右中央にしたいのですが、

text-align: center; が効かず、

text-indentを%指定したりすればインデントされるのですが、

文字数が不確定の場合はうまいこといきません。

無理矢理な方法ですが、

selectの文字自体は透明にしておき、selectと同じ幅の p なりに同じテキストを入れて、これにtext-align:center をするのはどうか、というサンプルです。


サンプルデモ

Codepen

http://codepen.io/skwbr/pen/JYGQLv


コード


html

<div class="btn-select">

<p class="label">選択してください</p>
<select class='select'>
<option value=''>選択してください</option>
<option value='1'>選択肢1</option>
<option value='2'>選択肢2</option>
<option value='3'>選択肢3</option>
</select>
</label>
</div>

はじめ p をselectの上に乗せて、pointer-events: none; でクリックを背面(select)に送っていたのですが、IE10以前で pointer-events が効かないようなので、select をopacityで透明にして、クリックは受け付けつつ背面のpが見えるように、という感じにしています。


css

body {

text-align: center;
}

.btn-select {
width: 300px;
margin: 20px auto;
position: relative;
background: #333;
border-radius: 6px;
cursor: pointer; /* IEでcursorがチラついたので */
}

.label {
color: #fff;
position: absolute;
width: 100%;
z-index: 1;
}

.select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
cursor: pointer;
width: 100%;
border: none;
padding: 20px;
opacity: 0;
position: relative;
z-index: 2;
}

/* IE10以上で矢印を消す */
.select::-ms-expand {
display: none;
}

/* フォーカス時 */
.select:focus {
z-index: -1;
opacity: 1;
}


ラベルの変わらないボタン的に使う場合は、JSは不要ですが、

selectと同じようにonchangeでラベルを変えたいときはやはりJSを用います。


js

// selectと同じようにonchangeでラベルを変えたいときはJSを用いる

$('.select').on('change', function(){

var $this = $(this)
var $option = $this.find('option:selected');
$('.label').text($option.text());

// onchange後にフォーカスしてるのが嫌な場合
$this.blur();

});


Webアクセシビリティ的な問題もありそうですが、

ひとつの一例として紹介でした。


出典/参考

"CSS pointer-events (for HTML) | Can I use..."

http://caniuse.com/#feat=pointer-events

"CSSだけで<select>をカスタマイズする - Qiita"

http://qiita.com/hiloki@github/items/844726db4128ebb0fdd8