背景画像の複数指定(multiple background images)をしてselect要素を装飾する

以下のようなプルダウンメニューの装飾をmultiple background imagesとbackground-positionのpx指定を利用して作成します。

multiple background imagesは文字通り、1つの要素に背景画像の複数指定を示しています。具体的な方法は以下のコードを見てもらえば分かると思いますが、,(カンマ)で区切っていくだけです。

注意点としては、上のレイヤーにくるものを先に書いてあげないと、思った通りの表示ができない可能性があります。
今回でいうと、三角形のアイコンの指定を先に書かず、グラデーションの指定を先にしてしまうと、グラデーションの下にアイコンが配置されるような形になるため、表示されなくなってしまいます。

次にアイコンの位置の指定ですが、background-positionでright 10pxのような指定が可能になり、要素の右や下から相対的な位置で配置できるようになりました。
ブラウザのサポート状況は以下のリンク先で確認してください。

CSS background-position edge offsets

HTML

<select name="" id="" class="select">
    <option value="">選択してください</option>
    <option value="">あああああ</option>
    <option value="">いいいいい</option>
</select>

CSS

.select {
    -webkit-appearance:none;
    font-size: 16px;
    padding: 10px 20px 10px 10px;
    width: 200px;
    text-align: center;
    background: #ffffff;
    background: url(tri.png) no-repeat right 10px center,
                -webkit-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%);
    background: url(tri.png) no-repeat right 10px center,
                linear-gradient(to bottom,  #ffffff 0%,#f6f6f6 47%,#ededed 100%);
}