webサイトのデザインを行っていて、formだけうまくまとまらないことがあります。中でも特にselect要素がはうまくいきません。また、select要素に関しては、ブラウザ間のcssの解釈に違いがあって、今ひとつすっきりしません。そこでjQueryプラグインの手を借りて、select要素のデザインをブラウザ間の差異を吸収したものにカスタマイズしてみました。

（１）はcssのみで行っていますので、ブラウザの対応が分かれます。ベンダープレフィックスを使用しています。

.sample1 select	{
    color: #999;
	font-size:14px;
    height: 36px;
    padding: 8px;
    border: 1px solid orange;
	background:url(images/shita-sankaku.gif) right top no-repeat;
	border-radius: 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-indent: .01px; /* Firefox用 */
    text-overflow: ""; /* Firefox用 */
}

（２）と（３）はjQueryプラグインを使っています。（２）は多機能で一例として、有効無効切り替えを付けています。デザインは、demoファイルのものをそのまま使っています。（３）はデザインをアレンジしていますが、設定方法に問題があるのか、古いSafariなどでは、プルダウンする際、下向き三角形の上あたりをクリックしないとうまく動作しません。