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, Apr 17 '12 at 05:47
@Miles yes i want to background images in select options if is possible in pure css ...? — Rohit Azad Malik, Apr 17 '12 at 05:49
Discourage use of dropkick due to the widths issue: http://stackoverflow.com/questions/11769888/how-to-individually-target-multiple-dropdowns-in-css-for-dropkick-plug-in — user1318135, Aug 02 '12 at 23:10

score 24 · Accepted Answer · edited Apr 23 '19 at 14:01

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

score 4 · Answer 2 · edited Apr 23 '19 at 13:58

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;
}

score 0 · Answer 3 · answered Apr 17 '12 at 05:54

0

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

answered Apr 17 '12 at 05:54

Miles

1,615
4
17
42

score 0 · Answer 4 · answered Apr 17 '12 at 05:55

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 '12 at 05:55

Kyle

65,599
28
144
152

score -1 · Answer 5 · answered Apr 17 '12 at 06:02

-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 '12 at 06:02

codef0rmer

10,284
9
53
76

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

5 Answers5

Linked