Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

skwbr
Director / Designer
1pac
「デジタル・インタラクティブ領域」に強みをもち、クライアントの課題解決のための仕組みづくりをサポートするクリエイティブプロダクションです
https://1pac.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした