SONICMOOV Googleページ

select要素を装飾するいくつかの方法

select要素を装飾するいくつかの方法

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

こんにちは。
sonicmoovコーディング担当の、だってぃです。

「ダッティ」よりも「だってぃ」という表記の方が好きです。
平仮名ラヴ。 もう8月も終わりだなんて信じられません。

8月がおわるってことは今年もあと…
(考えない方が身のためです)

さてさて、
select要素に装飾を施されたデザインを見た時の絶望感。
一度くらいは味わったことがありますよね?ね?
余白とったり、幅や高さしか満足に変えられないよ!
と枕を濡らした夜もありましたね?ね?

本日はそんなselect要素の装飾方法をご紹介。
※タイトルにはいくつかとか書きましたけど、2つしか紹介しません。
誇大表現じゃありません。大丈夫です。

【その1】CSS+Javascriptで装飾っ!

まずはスタンダードな方法。
CSSとJavascriptを使った方法です。
流れを説明すると…

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

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

▼HTML

<div class="selectArea">←要素A

    <div class="selectTxt"></div>←要素B

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

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

HTMLはこんな感じで。
要素Aにselect用のデザインを適用。
要素Bはselect要素で選択されたoptionの値を入れるための要素です。
空の要素を作ってしまうのが忍びないという方は、selectの初期値をテキストで入れておくのがいいでしょう
※要素A、Bはここではわかりやすいようdivにしていますが、pでもspanでもなんでもいいです。使う箇所によって調整してください。

【この時点での表示】

まだ何もしていないから、当然こうなりますね…
HTMLが用意できたところでCSSの設定にいきましょう。

続きを読む

▼CSS

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

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

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

【この時点での表示】

こんな感じです。
記述を減らすために、装飾は背景色とボーダーくらいにしています。
この辺は適宜調整を。

それでは最後にJavascript

▼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);
        }
}

※javascript、パパパっと適当に書いたものなので、実際に使用する際は考え方をくみ取って、よしなにお願いします。。。
ちなみにIEは9からじゃないと動かないと思いますので、それ以前のものに使いたい場合は手直しが必要です。
(JavascriptだけでなくCSSの方も)

複数個所に設置することを、想定しています。
一か所にしか使わないのであれば、もっと簡素なやりかたの方がいいですね。

【完成!】

【その2】CSSのみで装飾っっっ!?

そんなことできるの、だってぃさん?
そんな声が聞こえてくるようですね…

僕の答えはこうです。
「可能です……ですが…」
(「ですが」の理由は本エントリー下部「最後に」を読んでください。)

ではさっそく方法を。
CSSのappearanceプロパティを使います。
CSSのappearanceプロパティを使います。
大切な事なので2回言いました。

CSS3からappearanceという見慣れないプロパティが登場しました。
簡単に言うと、
対象要素の見た目を、ブラウザの標準的なフォーム系要素の見た目にする
ためのプロパティです。
※フォーム系要素という言葉に少し語弊がありますが、わかりやすさ優先で。

これはもう実際に使ってみるのが早いですね。
select要素を配置したHTMLファイルを用意し、CSSで以下のように指定してみてください。

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

すると・・・

・・・なんということでしょう!!!
select要素の見た目がbutton要素のそれになるではありませんか!!!
elect本来のプルダウン表示ももちろんちゃんとでます。

素敵!!!
select要素と違ってbutton要素は背景やらなにやら、自由にCSSで変えることのできる素直な子です。
ここまでくればもうこっちのもの。
あとはCSSであなた色に染めてあげてください。

▼装飾例(CSSでグラデこねこねetc)

appearanceプロパティの値は他にもありますが、ここでの紹介は割愛します。

詳しくは以下を参照してください。
CSS3リファレンス

最後に

【その2】の方法があれば【その1】なんていらないじゃないか。
と思ったそこのあなた!
それは違います…違うのです…
なんとこの方法、
2012年8月現在、完全に対応しているのがchromeとsafariくらいです。
なんて素晴らしいのでしょう、webkitって

▼Firefoxは惜しいところですね。selectデフォルトの▼さえ消えてくれれば完全にボタンの見た目になります…頑張りましょう(?)

▼IEは…(´;ω;`)ブワッ

ですので、【その2】は将来的には使えるようになるけれども今は。。。
といったところが本音でしょうか。

ちなみに、【その1】の方法でもブラウザの旧バージョンには注意が必要です。
IEの古いバージョン(6、7あたり)は、このままでは使用できません。

また、その他のブラウザでも旧バージョンでの確認は行っていませんのでご注意を。
個人的にはこの方法、スマートフォン用という認識でいます。
スマートフォンであれば、この方法が使えないほどの旧ブラウザはない…
多分…はい…
ということで、スマートフォンで積極的にこの方法を使っていきましょー!
おー!

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

記事作成者の紹介

だってぃ(フロントエンドエンジニア)

sonicmoovコーディング担当の、だってぃです。「ダッティ」よりも「だってぃ」という表記の方が好きです。平仮名ラヴ。

関連するSONICMOOVのサービス

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

×

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

×

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

新着の記事

mautic is open source marketing automation