Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

スクリーンショット 2016-02-03 15.36.26.png

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

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

次にアイコンの位置の指定ですが、background-positionright 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%);
}
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away