select optionをCSSでカスタマイズする方法を現役エンジニアが解説【初心者向け】

初心者向けにselect optionをCSSでカスタマイズする方法について解説しています。これは選択式のメニューを作成するものです。プルダウン式やリスト型の選択式メニューを設置するときの書き方、実際の見え方と動作を確認しましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

select optionをCSSでカスタマイズする方法について解説します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

select optionをCSSでカスタマイズする方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

select optionとは?

<select>タグや<option>タグは選択式メニューを設置することができます。主に入力フォームで複数の選択肢から1つを選ばせるときに使用します。

プルダウン式の選択式メニュー、またはリスト型の選択式メニューを設置することができます。

 

select optionの書き方

<select>タグを使用したプルダウン型の選択式メニューは、次のように書きます。

HTML:

<select name="都道府県">
  <option value="tokyo">東京都</option>
  <option value="kanagawa">神奈川県</option>
  <option value="chiba">千葉県</option>
  <option value="saitama">埼玉県</option>
  <option value="ibaraki">茨城県</option>
</select>

 

リスト型の場合は、<select>タグのsize属性に、リスト内に表示する行数を値に設定します。

HTML:

<select size="5">

 

入力フォームなどでは、<select>タグのname属性の値と、選択された<option>タグのvalue属性の値がセットで送信される仕組みです。例えば、上記のような場合に、「東京都」が選択されると、

都道府県=tokyo 

という情報を送信することができます。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

select optionの文字を配置する方法

プルダウン型の選択式メニューでは<select>タグの一番上の<option>タグのテキストが初期選択値として表示されます。または、selected属性が設定されている場合には、selected属性のある<option>タグのテキストが初期選択値として表示されます。

<option>のhidden属性を使用して、以下のように選択値以外の値を表示することもできます。

hidden属性を設定した<option>タグのテキストは、選択肢としては表示されません。ユーザーへの操作の説明と選択肢をコンパクトにまとめることができます。

一方リスト型の選択式メニューではhidden属性のある<option>タグのテキストは表示されません。

 

select optionの背景色をつける方法

先ほどの都道府県名の選択式メニューにCSSのbackgroundプロパティ(または、background-colorプロパティ)を使用して、背景色を設定してみましょう。

HTML:

<select name="住所">
  <option value="tokyo">東京都</option>
  <option value="kanagawa">神奈川県</option>
  <option value="chiba">千葉県</option>
  <option value="saitama">埼玉県</option>
  <option value="ibaraki">茨城県</option>
</select>

<select name="住所" size="5">
  <option value="tokyo">東京都</option>
  <option value="kanagawa">神奈川県</option>
  <option value="chiba">千葉県</option>
  <option value="saitama">埼玉県</option>
  <option value="ibaraki">茨城県</option>
</select>

CSS:

select{
  background:yellow;
}
option:first-child{
  background:green;
}

表示結果からわかるように、プルダウン型の選択式メニューにはoptionに背景色を指定することができません。リスト型の選択式メニューは、select、optionともに背景色の指定が可能です。

 

実際に書いてみよう

今回はリスト型の選択式メニューについて、隔行で色を変えるカスタマイズ、行ごとに色を変えてカラフルにカスタマイズしてみます。

HTML:

<p>1行ごとに色を変える</p>
<select name="住所" size="5" id="s1">
<option value="tokyo">東京都</option>
<option value="kanagawa">神奈川県</option>
<option value="chiba">千葉県</option>
<option value="saitama">埼玉県</option>
<option value="ibaraki">茨城県</option>
</select>
<p>虹色にする</p>
<select name="住所" size="5" id="s2">
<option value="tokyo">東京都</option>
<option value="kanagawa">神奈川県</option>
<option value="chiba">千葉県</option>
<option value="saitama">埼玉県</option>
<option value="ibaraki">茨城県</option>
</select>

 

CSS:

/*奇数行の背景をライトグレーに*/
#s1 option:nth-child(2n+1){
background:lightgray;
}

/*1行ごとに色を設定*/
#s2 option:first-child{
background:red;
color:#fff;
}
#s2 option:nth-child(2){
background:orange;
}
#s2 option:nth-child(3){
background:yellow;
}
#s2 option:nth-child(4){
background:green;
color:#fff;
}
#s2 option:nth-child(5){
background:blue;
color:#fff;
}

 

 

CSSの疑似クラスを使用して、いろいろなリスト型の選択式メニューを作成することができました。また<option>タグに、idやclassを設定して、CSSを適用したり、background以外のプロパティを適用することも可能です。

少しHTMLやCSSが複雑になりますが、プルダウン型の選択式メニューもCSSだけでカスタマイズすることができます。ただし、<option>タグにあたる部分はCSSを適用することができません。

HTML:

<div class="selectbox">
  <select name="住所">
    <option value="tokyo">東京都</option>
    <option value="kanagawa">神奈川県</option>
    <option value="chiba">千葉県</option>
    <option value="saitama">埼玉県</option>
    <option value="ibaraki">茨城県</option>
  </select>
</div>
<div class="selectbox color">
  <select name="住所">
    <option value="tokyo">東京都</option>
    <option value="kanagawa">神奈川県</option>
    <option value="chiba">千葉県</option>
    <option value="saitama">埼玉県</option>
    <option value="ibaraki">茨城県</option>
  </select>
</div>

CSS:

.selectbox {
    width:90%;
    margin:1em auto;
  position:relative;
}
select{
  -webkit-appearance:none;
    appearance:none;
  width:100%;
  padding:1em 1em;
  box-sizing:border-box;
  font-size:1em;
  border:#ccc 1px solid;
  border-radius:0;
  background:#fff;
}
.selectbox::after{
  content:"";
  display:block;
  width:10px;
  height:10px;
  position:absolute;
  right:5%;
  top:35%;
  border-bottom:#333 2px solid;
  border-right:#333 2px solid;
  transform:rotate(45deg)translateY(-30%);
}
.color.selectbox select{
  background:blue;
  color:#fff;
  border-radius:2em;
}
.color.selectbox::after{
  border-bottom:#fff 5px solid;
  border-right:#fff 5px solid;
}

 

 

今回は<select><option>をカスタマイズする方法について解説しました。様々なカスタマイズを試してみてください。

 

監修してくれたメンター

メンター 橋本真理

フリーのweb/グラフィックデザイナー

会社・店舗・自治体等のwebサイトのデザインから制作一式、ロゴや各種広告などのグラフィックデザインを主に活動。TechAcademyではWebデザインコース・WordPressコースを担当しています。

ラジオとバナナが好き。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。