デザインされたセレクトボックスを実装する セレクトボックスはCSSでほとんどスタイルを当てることができないので、フォームをデザインするときに苦労する方が多いのではないでしょうか。今回は、HTMLとCSS、そしてjQueryを利用して疑似セレクトボックスを作成してみましょう。 作成方法はとても簡単なので、覚えておけば色々なシーンで流用できるでしょう。 まずは、完成サンプルを見て作成するセレクトボックスのイメージを掴んでください。 疑似セレクトボックス そもそもデフォルトのセレクトボックスの挙動は クリックするとプルダウンが表示 プルダウンの項目をクリックする セレクトボックスの中身が選択した項目に置き換わる というようになっているのでこれを実装していきます。 セレクトボックスはselect要素とそれに内包されるoption要素(プルダウン部分)で構成されるので、それらを代替要素で構成し、プル
![第12回 jQueryでセレクトボックスをデザインする | gihyo.jp](https://cdn-ak-scissors.b.st-hatena.com/image/square/3b5f63c2f6e7f47fc6a1fc3c0dcf5dbd72a38ed5/height=288;version=1;width=512/https%3A%2F%2Fgihyo.jp%2Fassets%2Fimages%2FICON%2F2009%2F488_jquery-site-production.png)