selectタグを装飾する

今回、selectタグを装飾するのは、
スマートフォンサイトのみをターゲットにした、
CSS3「appearance」を使った方法で実装したいと思います。

一部PCでも対応されていますが、まだまだ対応されていないブラウザもある為、
実用的ではないと思います。

PC版で装飾したい場合には、CSSではなくjQueryプラグインで、実装してみてください。
easyselectbox.min.js
https://github.com/kosinix/easyselectbox

HTML

<select name="select" id="list">
    <option value="">選択してください</option>
    <option value="value1">value1</option>
    <option value="value2">value2</option>
    <option value="value3">value3</option>
</select>
<input type="image" class="btn" src="img/btn.gif">

CSS

#list {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    
    width: 82%;
    margin-right: 3%;
    padding: 2%;
    
    color: #666;
    border: none;
    background:#f1f1f1;
    
    cursor: pointer;
    vertical-align: middle;
}
.btn {
    width: 16%;
    max-width: 44px;
    vertical-align: middle;
}

CSS3プロパティ 参考サイト

appearance
フォームのインターフェースを標準的なUIに変更する
http://www.htmq.com/css3/appearance.shtml

box-sizing
ボックスサイズの算出方法を指定
http://www.htmq.com/css3/box-sizing.shtml

border-radius
要素を丸角にする
http://www.htmq.com/css3/border-radius.shtml

jQuery

ボタンをタッチ（クリック）した時のselectを実行するのは、スクリプト側で制御します。

iphoneの場合、

$('#list').select().focus();

で、セレクトドラムが表示されますが、
Androidでは、フォーカスされるだけで、オプションリストは表示されません。

ではどうするか・・・
フォーカスされた時にclickイベントを起こせば開くのではないか。

そこで、trigger(‘click’)を追加。

$('#list').select().focus().trigger('click');

ですが、これでもオプションリストは開きませんでした。

ネットの海を徘徊していると、同じような方がいらっしゃいました。

http://stackoverflow.com/questions/14756955/jquery-focus-not-working-on-android

このサイトの回答を参考にした所、Androidでも正常にselectが実行されるようになりました。

//Select click処理
var action = 'ontouchstart' in window ? 'touchend' : 'click';
$(".btn").on(action, function() {
    var dropdown = $('#list').get(0);
    showDropdown(dropdown);
    
    function showDropdown(element) {
        var event;
        
        event = document.createEvent('MouseEvents');
        event.initMouseEvent('mousedown', true, true, window);
        element.dispatchEvent(event);
    };
    return false;
});