How to customize a select element through CSS to achieve this dark style?

Question

How can I create a select element like the below image?

enter image description here

My code is

<select>
    <option>-- Select City --</optoin>
    <option>Delhi</option>
    <option>Gurgaon</option>
</select>

This is available in jQuery, but I want to use pure CSS.

I'm really not sure what you're asking. You want an image to be behind each of the select options? — Miles
– Miles, Commented Apr 17, 2012 at 5:47
@Miles yes i want to background images in select options if is possible in pure css ...? — Rohit Azad Malik
– Rohit Azad Malik, Commented Apr 17, 2012 at 5:49
Discourage use of dropkick due to the widths issue: stackoverflow.com/questions/11769888/… — user1318135
– user1318135, Commented Aug 2, 2012 at 23:10

TylerH · Accepted Answer · 2019-04-23 14:01:47Z

26

Here is a CSS-powered select menu; you can customize it as you need to:

label.custom-select {
    position: relative;
    display: inline-block;

}

.custom-select select {
    display: inline-block;
    padding: 4px 3px 3px 5px;
    margin: 0;
    font: inherit;
    outline:none; /* remove focus ring from Webkit */
    line-height: 1.2;
    background: #000;
    color:white;
    border:0;
}

/* Select arrow styling */
.custom-select:after {
    content: "▼";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    font-size: 60%;
    line-height: 30px;
    padding: 0 7px;
    background: #000;
    color: white;
    pointer-events: none;
}

.no-pointer-events .custom-select:after {
    content: none;
}

<label class="custom-select">
    <select>
        <option>Sushi</option>
        <option>Blue cheese with crackers</option>
        <option>Steak</option>
        <option>Other</option>
    </select>
</label>

JSFiddle

edited Apr 23, 2019 at 14:01

TylerH

21.3k84 gold badges84 silver badges121 bronze badges

answered Apr 17, 2012 at 12:04

Shailender Arora

7,8182 gold badges34 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TylerH · Accepted Answer · 2019-04-23 13:58:48Z

4

Using the pointer-events:none; it will let you click through the arrow and will activate the select field, So the CSS would look like this for that element.

.custom-select:after {
    content: "▼";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    font-size: 60%;
    line-height: 30px;
    padding: 0 7px;
    background: #000;
    color: white;
    pointer-events:none;
}

edited Apr 23, 2019 at 13:58

TylerH

21.3k84 gold badges84 silver badges121 bronze badges

answered May 9, 2014 at 12:24

eblue

1091 gold badge3 silver badges12 bronze badges

Comments

Miles · Accepted Answer · 2012-04-17 05:54:34Z

0

option{
  background-image:url(image.png);
  background-repeat: no-repeat;
}

answered Apr 17, 2012 at 5:54

Miles

1,6354 gold badges17 silver badges43 bronze badges

Comments

Kyle · Accepted Answer · 2012-04-17 05:55:51Z

0

There is no way to customise the select as you see it in your screenshot without Javascript.

You can see in this example that you can customise colors, padding and borders, but not the button itself.

answered Apr 17, 2012 at 5:55

Kyle

67.5k28 gold badges148 silver badges153 bronze badges

Comments

codef0rmer · Accepted Answer · 2012-04-17 06:02:22Z

-1

Even though you added a background image to the selectbox, you can not hide that handler on right hand side. I would recommend to use this : http://jamielottering.github.com/DropKick/

You just have to modify the CSS a bit to suit your need.

answered Apr 17, 2012 at 6:02

codef0rmer

10.5k9 gold badges55 silver badges78 bronze badges

Collectives™ on Stack Overflow

How to customize a select element through CSS to achieve this dark style?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related