こんにちは。
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

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

【この時点での表示】

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

続きを読む

▼CSS

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

【この時点での表示】

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

それでは最後にJavascript

▼Javascript

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

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

【完成!】

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

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

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

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

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

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

すると・・・

・・・なんということでしょう!!!
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あたり)は、このままでは使用できません。

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

あわせて読みたい記事