select要素の見た目を変える

スマートフォンでselect要素を使おうとしたら、Androidのブラウザで見た目がバラバラなのがイヤだったので、調べてみたらあっさり解決したので共有しておきます。

CSS3のappearanceプロパティを指定することで解決します。

select {
    /* 見た目をinputのtype=buttonに */
    -moz-appearance: button;
    -webkit-appearance: button;
    appearance: button;
}

これで見た目がbuttonになったので、あとは見た目を装飾してあげればオッケー。

select {
    -moz-appearance: button;
    -webkit-appearance: button;
    appearance: button;
    padding: 4px;
    background: #EAEAEA;
    border: none;
    color: #222;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.32) inset;
}

サンプルを見る

参考:appearance-CSS3リファレンス

この記事をブックマーク・シェアする

この記事に関連する記事

カテゴリ

コメント

コメントを残す

コメント*

コメントリンクを nofollow free に設定することも出来ます。

誤字・脱字やリンク切れなどお気づきの点がございましたら@loop0429までよろしくお願いします。

この記事の先頭へ