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

select optionをCSSでカスタマイズする方法についてテックアカデミーのメンター（現役Webデザイナー）が初心者向けに解説します。

目次

• select optionとは？
• select optionの書き方
• select optionの文字を配置する方法
• select optionの背景色をつける方法
• 実際に書いてみよう
• まとめ

 

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

 

 

select optionとは？

select optionとは、<select>タグの<option>タグのことで、画面上の見た目では選択式メニューの選択肢にあたります。
主に入力フォームで複数の選択肢から1つを選ばせるときに使用します。

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

 

[PR] Webデザインで副業する学習方法を動画で公開中

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 

 

 

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

プルダウン型の選択式メニューでは<select>タグの一番上の<option>タグのテキストが初期選択値として表示されます。

または、<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サイトのデザインから制作一式、ロゴや各種広告などのグラフィックデザインを主に活動。テックアカデミーではWebデザインコース・WordPressコースを担当しています。 ラジオとバナナが好き。

 

CSSを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

CSSを学習していて、このように思ったことはありませんか？

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！