jquery - Jquery UI Button に似た CSS スタイルだけの Select Box

Question

.button() を使用して美しい送信ボタンを作成できますが、ページの残りの要素、特に選択ボックスは、通常の醜い CSS スタイルのままです。

選択ボックスの Jquery UI ボタン​​から CSS スタイルをハイジャックする方法はありますか?

Answer 1

完全にノーではありません。選択/ドロップダウン ボックスは、通常、オペレーティング システムとブラウザに依存します。細かいレベルで制御することはできません。

Chrome / Webkit ブラウザーでは、一部のスタイル設定が可能です。この質問を参照してください: How to style a <select> dropdown with CSS only without JavaScript?

追加のマークアップを使用して を囲むことがselectできる場合は、いくつかのことができます。

参照: http://bavotasan.com/2011/style-select-box-using-only-css/

それ以外の場合は、次のような JS ソリューションに頼る必要があります

http://cssglobe.com/post/8802/custom-styling-of-the-select-elements

と

http://www.htmlgoodies.com/beyond/css/how-to-create-custom-select-menus-with-css.html

Answer 2

jquery-ui 1.10.2 を使用して、themeroller から適切なテーマを既にダウンロードしてインストールしていると仮定します。

<select id="myselect">
  <option> Option 1 </option>
  <option> Option 2 </option>
  <option> Option 3 </option>
  <option> Option 4 </option>
</select>

<script type="text/javascript">
  $("#myselect").menu();
</script>

Chrome と Safari で動作します...