Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What is going on with this article?
@yukinaka

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

More than 3 years have 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%);
}
3
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  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

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
3
Help us understand the problem. What is going on with this article?