html - スタイル選択メニュー

Question

次の画像のように<select>メニューのスタイルを設定することはできますか？

これは私が取り組んできたフィドルですが、矢印を正しく取得できません。

http://jsfiddle.net/nmpxj/

HTMLは次のとおりです。

<select>
  <option>Alabama</option>
  <option>Alaska</option>
</select>

CSSは次のとおりです。

select {
background: -webkit-linear-gradient(#C9C9C9, #CCC);
background: -moz-linear-gradient(#C9C9C9, #CCC);
border: 1px solid #ccc;
color: white;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);    
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
padding:10px;
}

このような<select>メニューのスタイルを設定することは可能ですか？

Answer 1

あなたがそれを行う必要がある方法は、基本的に、次のように左の両方をフロートさせ、右のものをクリアすることです

select { float:left; clear:right; }
div { float:left; clear:right; }

これにより、それらが互いに近づきます。また<p>、選択ボックスの横にタグを使用しないでください。代わりに矢印を div 内に配置してください。そうしない理由はなく、フロート時にスペースも削除されます。このようにすると、よりクリーンなコーディングになります。

Answer 2

これをcssに追加できます：

width: auto;  
background: url('http://cdn1.iconfinder.com/data/icons/picol/icons/arrow_sans_down_32.png') no-repeat right;

これでうまくいくはずです。

デモ: デモを選択