セレクトボックスのテキストを中央寄せにするためのCSS

セレクトボックスのテキストを中央寄せにするためのCSS

セレクトボックスのテキストを中央寄せにするためのCSS
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

  • 広告主様募集中
    ワンコインで広告掲載してみませんか?
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

先日、以下のようなセレクトボックスを作成してほしいという依頼があり、どうしたものかとちょっと頭を悩ませました。

中央寄せのセレクトボックス

というのも、セレクトボックスには「text-align:center;」が効かないんですよね。それに、三角形の色も変えないといけないです。そのため、上記のようなセレクトボックスを実現するには、一工夫必要なわけです。

なんとかCSSだけで実現することができたので、その方法を備忘録として残しておきたいと思います。簡単なデモも用意しましたので、挙動についてはデモページをご確認ください。

デモページを見る

スポンサードリンク

セレクトボックスのテキストを中央寄せにするためのCSS

セレクトボックスのテキストを中央寄せにするための方法を解説していきます。

まずは、HTML側は通常通りセレクトボックスをマークアップして、直前に表示用のdiv要素を記述しておきます。セレクトボックスと直前のdiv要素を重ねて、セレクトボックスを透過することで、中央寄せを実現します。


<div class="select-area">
 <div class="select-label"><span>▶</span>選んでください</div>
 <select>
  <option value="" selected="selected">選んでください</option>
  <option value="">選択1</option>
  <option value="">選択2</option>
  <option value="">選択3</option>
 </select>
</div>

続いてCSS側は以下のようにします。

.select-area {
 position: relative;
}

.select-label {
 width: 380px;
 background: #B4B4B5;
 color: #fff;
 padding: 8px 0;
 font-size: 15px;
 border-radius: 5px;
 text-align: center;
 position: relative;
}

.select-label span {
 color: #ED7742;
 margin: 0 10px 0 0;
}

select {
 opacity: 0;
 position: absolute;
 top: 0;
 width: 380px;
 background: #B4B4B5;
 color: #fff;
 padding: 8px;
 font-size: 15px;
}

select:focus {
 opacity: 1;
}

全体を内包している.select-areaに「position:relative;」を指定して、セレクトボックスの配置の起点とします。

.select-labelでは、実現したい見た目を指定します。ここでテキストを中央寄せにしたり、記号の色を変えたりしています。

selectには「opacity:0;」を指定しておき、.select-labelのみが表示されるようにします。「display:none;」だとセレクトボックスが機能しなくなるので、あくまで「opacity:0;」で透明にしておくのがポイントです。

select:focusに「opacity:1;」を指定することで、セレクトボックス部分(.select-label)をクリックもしくはタップすることで、セレクトボックスが表示され、選択肢が選べるようになります。

あとがき

若干面倒ではありますが、上記の方法でセレクトボックスのテキストを中央寄せにすることができます。セレクトボックスの見た目をがっつり装飾する必要がある場合は、ぜひ参考にしていただければ幸いです。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。