SONICMOOV Googleページ

セレクトボックスをCSSなどでカスタマイズする方法

セレクトボックスをCSSなどでカスタマイズする方法

  • このエントリーをはてなブックマークに追加

こんにちは!
マークアップエンジニアのうさこです!

今回は select 要素の装飾をカスタマイズする方法を3つご紹介しますよ〜!!

目次

1. CSS だけでカスタマイズする

CSS3 の appearance プロパティを使います。

要素の見た目をブラウザの標準的なフォーム系要素の見た目にするためのプロパティです!
select 要素を配置した HTML ファイルを用意して、CSS を以下のように指定してみてください。

select{
    -webkit-appearance:button;
    -moz-appearance:button;
    appearance:button;
}

すると・・・

selectをcssでカスタマイズ

select 要素の見た目が button 要素になりましたね!
select 要素の本来のプルダウン表示ももちろんちゃんとでます。

プルダウンを表示

select 要素と違って button 要素は自由に CSS で変えることのできます。
あとは CSS をよしなにしてカスタマイズしてみてください。

装飾例(CSS でグラデーションをこねこね etc)

cssでselectの装飾サンプル

appearance プロパティの値は以下を参照してください。

appearance-CSS3リファレンス

2. CSS + jQuery でカスタマイズする

そして割とスタンダードな方法。
CSS と jQuery を使った方法です。

  1. 適当な要素(要素Aとする)を用意する。
  2. その中に空の要素(要素B)と select 要素をいれる。
  3. 要素Aに select 要素として用意したデザインを適用する。
  4. select 要素を透過(opacity)して、要素Aに重ねる(※完全に覆いかぶさるように)
  5. select 要素で選択された option 要素の値を取得(jQuery)して、要素Bにその値をいれる。

ようするに、別の要素を装飾して、select の値をいれるということです。
では、実際のソースを見てみましょう!

HTML

<!-- 要素A -->
<div class="selectArea">

    <!-- 要素B -->
    <div class="selectTxt"></div>

    <select class="selectObj">
        <option selected="selected">セレクト1-値1</option>
        <option>セレクト1-値2</option>
        <option>セレクト1-値3</option>
    </select>

<!--/.selectArea--></div>

要素Aに select 用のデザインを適用します。
要素Bは select 要素で選択された option の値を入れるための要素です。

この時点での表示

HTML が用意できたところで CSS を設定しましょう。

CSS

// 要素Aへの CSS 設定
.selectArea{
    position:relative;
    width:288px;
    padding:6px;
    border:1px solid #cccccc;
    background:#eeeeee;
}

// select 要素への CSS 設定
.selectArea .selectObj{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
}

CSS での最大のポイントは「opacity:0」です。
opacity を使用して透過することで、表示上では見えないけれどちゃんと機能する select 要素を作り出すことができます。
透過 select 要素を用意したら、要素Aに対して絶対配置します。
width、height をそれぞれ 100% に設定して、要素Aにぴったり覆いかぶさるような形にしてあげます。

この時点での表示

selectとjqueryで装飾

記述を減らすために、装飾は背景色とボーダーくらいにしています。
適宜、調整してみてください!

それでは最後に。

jQuery

$(function(){
    selectView('.selectArea');
});

function selectView(elm){
    var $elm = $(elm);
    var selectObj = new Array();
    var selectTxt = new Array();

    $elm.each(function(i){
        var $txt = $(this).find('.selectTxt');

        selectObj.push($(this).find('.selectObj'));
        selectTxt.push($(this).find('.selectTxt'));

        //プルダウン変更時
        $(this).change(function() {
            var str = '';
            // テキストをセット
            $(this).find('option:selected').each(function() {
                str += $(this).text();
            });
            $($txt).text(str);
        }).trigger('change'); //初期表示
    });
}

1ページ内に複数 select 要素を設置することを想定しています。

完成!

3. CSS + Javascript でカスタマイズする

jQuery を Javascript にしただけですね。
IE9 以上じゃないと動かないと思いますので、それ以前のものに使いたい場合は手直しが必要です。

Javascript

window.addEventListener(
    'load',
    function(){
        var selectArea = document.querySelectorAll('.selectArea');
        selectView(selectArea);
    },
    false
);

function selectView(elm){
        var selectObj = new Array();
        var selectTxt = new Array();

        for(var i=0,len= elm.length; i < len; i++){
            selectObj.push(elm[i].querySelector('.selectObj'));
            selectTxt.push(elm[i].querySelector('.selectTxt'));

            //初期表示
            selectTxt[i].innerHTML = selectObj[i].options[selectObj[i].selectedIndex].value;

            //プルダウン変更時
            selectObj[i].onchange = (function(i){
                return function(){
                    selectTxt[i].innerHTML = this.options[this.selectedIndex].value;
                }
            })(i);
        }
}

最後に

その1 の方法があれば、その2その3 なんていらないじゃないか。
と思ったそこのあなた!それは違います… 違うのです…
なんと appearance … IE は対応していないのです。(2016年11月現在)
大半のブラウザはサポートされてきたのですけどね…

selectとcssとie

ただし… IE10 以上であれば、魔法の言葉を付け加えてあげると select 要素の矢印ボタンは非表示にすることができます。

select::-ms-expand {
	display: none;
}

IE9 以下は・・・・・・・・・
あきらめて その2その3 で対応するようにしましょう。

ということで、積極的に その1 の方法を使っていきましょう〜!!!!

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

うさこ(マークアップエンジニア)

ソリューション事業部マークアップエンジニアのうさこです。入社して4年目となりました!ラーメンが大好きなのですが、脂肪という名の悪魔を極力避けるために我慢の日々を過ごしています… ぐぐぐ…

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation