LoginSignup
31

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-09-16

cap_ 2015-09-16 22.46.18.png

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
31