ボタンについては UI Button で見栄えを良くしたのですが、セレクトボックスやチェックボックスは無粋なままです。
「フォームの見栄え・使い勝手を強化するjQueryプラグインいっぱい」を見て、Uniform Sexy forms with jQuery の導入にチャレンジしたものの、うまくいかずに断念したりしていました。
でも今回の jQuery UI Selectmenu はひと味違います。
なぜなら開発元の filament group は jQuery UI ThemeRoller の 開発元であり Commercial sponsors でもあります。 ですから、当然ですが jQuery UI とデザインの統一性が取れています。
デザイン系プラグイン導入で難しいのは、この統一性なんですよね。 Thema Roller の効果ももちろん反映されます。
ただ適用するだけではダメで、かなりCSSをいじくりまわしましたが、満足できるデザインになりました。
この UI Selectmenu はどういう仕組かというと、元のselect要素やoption要素は非表示にして、代わりにul要素とli要素に置き換えることで実現しています。
結構コストのかかる処理なので、セレクトボックスが沢山あるページではタイムアウトすることがあります。
基本は全適なんですが、毎行セレクトボックスが入るテーブルでは、否定擬似クラス(:not)で排除するようにしています。
チェックボックスとラジオボタンについても、filament group からデザインを変えるためのプラグインが出ています。
ただ、こちらは残念ながら ThemeRoller 対応ではないんですよね。 「プランB」のように背景が黒だと使えません。
jQuery UI Selectmenu は、jQuery UI に標準的に含まれている訳ではありませんのでご注意を。