セレクトボックスのテキストを中央揃えにする方法【CSS】

セレクトボックス（<select>）のテキストを中央揃えにする方法を解説します。

結論から書くと、jQueryは必要ありません。CSSに text-align: center を1行書けば同じ結果になります。ただし、この指定は Safari では効きません。

セレクトボックスはブラウザごとに描画のされ方が違うため、テキストの位置指定が素直に通らない要素です。この記事では、素のCSSでの書き方と、Safariを含めて確実に中央揃えにする方法の2つを解説します。

CSSだけで中央揃えにする

結論：対象のセレクトボックスに text-align: center を指定するだけです。JavaScriptもjQueryも要りません。

<select id="centered-select">
  <option value="option1">オプション1</option>
  <option value="option2">オプション2</option>
  <option value="option3">オプション3</option>
</select>

#centered-select {
  text-align: center;
}

これで、閉じているときに表示される選択中のテキストが中央に寄ります。

この記事はもともとjQueryで実装する方法として公開していましたが、やっていたことは text-align をCSSで当てるのと同じでした。jQueryで書くと次のようになります。

// これはCSSで書くのと結果が同じ
$(document).ready(function() {
  $('#centered-select').css('text-align', 'center');
});

JavaScriptの読み込みを待ってからスタイルが当たるぶん、表示が一瞬ずれることもあります。スタイルを当てるだけならCSSに書いてください。

Safariでは効かない点に注意

結論：<select> への text-align は、Safari では反映されません。macOSとiOSの両方で左寄せのままになります。

セレクトボックスは、ブラウザとOSがネイティブのUIとして描画している要素です。そのため、テキストの位置のような指定が効く範囲がブラウザによって異なります。

▼text-alignの効き方

ブラウザ	閉じているとき	選択肢を開いたとき
Chrome / Edge	反映される	反映されないことがある
Firefox	反映される	反映されないことがある
Safari	反映されない	反映されない

開いたときのリスト（<option> の並び）は、どのブラウザでも制御できないと考えてください。あれはブラウザではなくOSが描画しているためです。中央揃えにできるのは、あくまで閉じているときに見えているテキストだけです。

text-align-last を併記すると効く範囲が広がる場合もありますが、Safariの挙動は変わりません。

#centered-select {
  text-align: center;
  text-align-last: center;
}

Safariでも確実に中央揃えにする方法

結論：appearance: none でブラウザ標準の見た目を無効にし、自分でスタイルを作れば、Safariを含めてすべてのブラウザで中央に揃います。

ネイティブの描画をやめさせてしまえば、通常の要素と同じようにCSSが効きます。矢印は自前で用意します。

.select-wrap {
  position: relative;
  display: inline-block;
}

.select-wrap select {
  /* ブラウザ標準の見た目を無効にする */
  appearance: none;
  -webkit-appearance: none;

  text-align: center;
  /* 矢印のぶんだけ左右に同じ余白を取る（中央がずれないように） */
  padding: 8px 32px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  font: inherit;
}

/* 矢印を自前で描く */
.select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #666;
  border-bottom: 2px solid #666;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

<div class="select-wrap">
  <select id="centered-select">
    <option value="option1">オプション1</option>
    <option value="option2">オプション2</option>
  </select>
</div>

ポイントは padding の左右を同じ値にすることです。矢印を右に置くぶん右側だけ広げたくなりますが、そうするとテキストの中央が左にずれます。左右を揃えたうえで、矢印は position: absolute で重ねてください。

pointer-events: none も必要です。矢印の擬似要素がクリックを受け取ってしまうと、その部分を押してもセレクトボックスが開かなくなります。