Explore our sites

Stack Exchange
tour help careers 2.0
Take the tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 302 down vote favorite
130

Is there a CSS-only way to style a <select> dropdown?

I need to style a <select> form as much as humanly possible, without any JavaScript. What are the properties I can use to do so in CSS?

This code needs to be compatible with all major browsers:

  • Internet Explorer 6,7 and 8
  • Firefox
  • Safari

I know I can make it with JavaScript: Example.

And I'm not talking about simple styling. I want to know, what the best we can do with CSS only.

I found similar questions on Stack Overflow.

And this one on Doctype.com.

share|improve this question
 
nothing much found on google only js solution is there –  Jitendra Vyas Dec 13 '09 at 3:36
2  
I'm not sure why this is getting downvotes. It's a legitimate question, if a bit vague. –  Dave Ward Dec 13 '09 at 3:42
8  
I feel it's a legitimate question, but the answer is "no, not really" or "not the way you want it". But no one (neither me) is 100% sure about it, this feeling of ambiguity crawls underneath reader's skin and the legitimacy of the question gets questioned. –  ZJR Dec 13 '09 at 3:56
 
@Jitendra, I know what your getting at. We'd love it if you made your question more explicit. Plus, I think I found what you might be looking for. This is experimental, but check it out: cappuccino.org/aristo/showcase –  jeremyosborne Dec 13 '09 at 3:59
 
@jeremyosborne - Thanks for reply. I know i can make it with javascript . your eaxmple link is based on JS. Why i asked this question because i wanted to know, is anybody's there knows about what best we can do with css only –  Jitendra Vyas Dec 13 '09 at 8:25
show 2 more comments

16 Answers

up vote 146 down vote accepted

After extensive searching, I have found two reasonable approaches for creating custom pure-CSS select drop-downs.

Approach #1. Original article here

Wrap the select element in a div with a fixed width (say 150 pixels) and overflow hidden. Then give the select element a width of about 20 pixels greater than the div. The result is that the default drop-down arrow of the select element will be chopped off, and you can place any background image you want on the right-hand-side of the div.

The advantage of this approach is that it is cross-browser (Internet Explorer 8 and later, WebKit, and Gecko). However, the disadvantage of this approach is that the options drop-down juts out on the right-hand-side (by the 20 pixels which we hid... because the option elements take the width of the select elment).

[It should be noted, however, that if the custom select element is necessary for MOBILE this above problem doesn't apply - because of the way each phone natively opens the select element. So for mobile, this is probably the best solution.]

[Here's a demo of this approach]

Approach #2 Original post here

Use the pointer-events property.

The idea here is to overlay an element over the native drop down arrow (to create our custom one) and then disallow pointer events on it.

Advantage: No extra markup, works well in WebKit and Gecko.

Disadvantage: Internet Explorer doesn't support pointer-events. (even Internet Explorer 10), which means you can't click the custom arrow. Also, another (obvious) disadvantage with this method is that you can't target your new arrow image with a hover effect or hand cursor, because we have just disabled pointer events on them!

However, with this method you can use Modernizer or conditional comments to make Internet Explorer revert to the standard built in arrow.

This, in my opinion is the best available solution to date (at least until the appearance property gets wider browser support).

Here is a fiddle (which uses the second approach together with Internet Explorer conditionals) where you can verify this.

Being that Internet Explorer 10 doesn't support conditional comments anymore: If you want to use approach #2, you should probably use Modernizr. However, it is still possible to exclude the pointer-events CSS from Internet Explorer 10 with a CSS hack described in Stack Overflow question How do I target only Internet Explorer 10 for certain situations like Internet Explorer-specific CSS or Internet Explorer-specific JavaScript code?.

share|improve this answer
 
Which is best according to you from these 2 methods? –  Jitendra Vyas Dec 20 '12 at 9:57
1  
It depends on the design requirements. If you're ok with the drop-down jutting out - then that's the best because it's cross browser (IMO allbrowsers + IE8+ could be considered cross-browser) but I think to many - this won't do. So actually in my statement above I meant that aprroach #2 was the best. –  Danield Dec 20 '12 at 10:02
3  
Also, the fiddle which I posted uses approach #2 with conditional statements to allow IE to use its default arrow. –  Danield Dec 20 '12 at 10:08
1  
@AlexisLeclerc Fixing the div and select to the same width only works in -webkit browsers like Chrome. (because I included the the rule -webkit-appearance: none; ) However this doesn't work in other browsers like firefox –  Danield Jun 30 '13 at 6:04
1  
If I may propose an improvement for Approach #1, I personally find the lack of border or lack of selection halo to the right side very annoying. I updated your fiddle with something I used in my current project : jsfiddle.net/YvCHW/1745 . Tell me what you think! –  Alexis Leclerc Jul 2 '13 at 20:19
show 6 more comments
up vote 150 down vote

It is possible, but unfortunately only in Chromium and Chrome browsers to the extent we, as developers, require. Here is the example of CSS styling gathered from Chrome 10 options panel via built-in developer tools inspector:

select {
  -webkit-appearance: button;
  -webkit-border-radius: 2px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-padding-end: 20px;
  -webkit-padding-start: 2px;
  -webkit-user-select: none;
  background-image: url(../images/select-arrow.png), 
    -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
  background-position: center right;
  background-repeat: no-repeat;
  border: 1px solid #AAA;
  color: #555;
  font-size: inherit;
  margin: 0;
  overflow: hidden;
  padding-top: 2px;
  padding-bottom: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;}

When you run this code on any page within Chrome it will change the appearance of the select box, remove standard OS-arrow and add PNG-arrow, put some spacing before and after the label, almost anything you want.

the most important part is -webkit-appearance declaration which changes how the control behaves.

It works to some point in Firefox 4, when using -moz prefix, but it seems that Gecko doesn't fully support appearance.

share|improve this answer
2  
Hey, I noticed that the select boxes started looking very different as of Firefox 12 (it looks a LOT like Chrome's (I have a Mac)), and it seems that FF 12 supports a bunch more appearance attributes. –  CWSpear Apr 30 '12 at 18:17
 
@matthew Morek - it doesn't work in Firefox –  Jitendra Vyas Oct 4 '12 at 14:23
 
Please remember to set background AND text colors, every operating system is different. If the user's OS is gray (very likely) this #555 will be nearly invisible. I see this problem all over the web. –  PJ Brunet Dec 20 '13 at 2:48
add comment
up vote 28 down vote

<select> tags can be styled through CSS just like any other HTML element on an HTML page rendered in a browser. Below is an (overly simple) example that will position a select element on the page and render the text of the options in blue.

Example HTML file (selectExample.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Select Styling</title>
  <link href="selectExample.css" rel="stylesheet">
</head>
<body>
<select id="styledSelect" class="blueText">
  <option value="yourMom">Your Mom</option>
  <option value="myMom">My Mom</option>
</select>
</body>
</html>

Example CSS file (selectExample.css):

/* All select elements on page */
select {
  position: relative;
}

/* Style by class. Effects the text of the contained options. */
.blueText {
  color: #0000FF;
}

/* Style by id. Effects position of the select drop down. */
#styledSelect {
  left: 100px;
}
share|improve this answer
32  
Hey, let's try to keep our mother's out of this :P +1 for an excellent and helpful answer. –  nocarrier May 23 '12 at 18:55
10  
Amazing, first time I saw "mothers" involved on the Internet without it being rude. +1 for that ! –  BaL Aug 6 '12 at 15:36
11  
This answer does not solve this question. It only styles select input but not the dropdown –  Kyborek Oct 18 '12 at 8:29
add comment
up vote 22 down vote

The select element and its dropdown feature are difficult to style.

style attributes for select element confirms what Ryan Dohery said in a comment to the first answer:

"The select element is part of the operating system, not the browser Chrome. Therefore, it is very unreliable to style, and it does not necessarily make sense to try anyway."

share|improve this answer
add comment
up vote 21 down vote

The largest inconsistency I've noticed when styling select dropdowns is Safari and Google Chrome rendering (Firefox is fully customizable through CSS). After some searching through obscure depths of the Internet I came across the following, which nearly completely resolves my qualms with WebKit:

Safari and Google Chrome fix:

select
  -webkit-appearance: none;

This does, however, remove the dropdown arrow. You can add a dropdown arrow using a nearby div with a background, negative margin or absolutely positioned over the select dropdown.

*More information and other variables are available in CSS property: -webkit-appearance.

share|improve this answer
 
Don't forget to add your styling after that ;) But I am very glad i read this comment today. –  teewuane May 25 '12 at 21:59
 
could you please elaborate on your statement: "Firefox is fully customizable through CSS" to me it looks like firefox doesn't support the appearence property... so how would this be done in firefox? –  Danield Dec 19 '12 at 13:31
add comment
up vote 10 down vote

The blog post How to CSS form drop down style no JavaScript works for me, but it fails in Opera though:

select {
    border: 0 none;
    color: #FFFFFF;
    background: transparent;
    font-size: 20px;
    font-weight: bold;
    padding: 2px 10px;
    width: 378px;
    *width: 350px;
    *background: #58B14C;
}

#mainselection {
    overflow: hidden;
    width: 350px;
    -moz-border-radius: 9px 9px 9px 9px;
    -webkit-border-radius: 9px 9px 9px 9px;
    border-radius: 9px 9px 9px 9px;
    box-shadow: 1px 1px 11px #330033;
    background: url("arrow.gif") no-repeat scroll 319px 5px #58B14C;
}

<div id="mainselection">
    <select>
    <option>Select an Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
    </select>
</div>
share|improve this answer
 
link not working –  Jitendra Vyas Dec 6 '11 at 13:45
 
Link works for me. –  Dominic Nov 26 '12 at 0:50
add comment
up vote 5 down vote

Yes. You may style any HTML element by its tag name, like this:

select {
  font-weight: bold;
}

Of course, you can also use a CSS class to style it, like any other element:

<select class="important">
  <option>Important Option</option>
  <option>Another Important Option</option>
</select>

<style type="text/css">
  .important {
    font-weight: bold;
  }
</style>
share|improve this answer
3  
i'm not talking about like this i want to change dropdown arrow to something else –  Jitendra Vyas Dec 13 '09 at 3:38
4  
You can't style the dropdown arrow to another image, it's controlled by the OS. If you really need to, your best bet is to use a DHTML dropdown widget. –  Ryan Doherty Dec 13 '09 at 3:39
1  
You can only change CSS properties through CSS. You can change its margin, padding, font properties, background-color, etc. If you want to make it look completely different, you basically have to replace it with graphics at runtime via JavaScript (which isn't a terrible solution if done well). –  Dave Ward Dec 13 '09 at 3:39
 
@Ryan Doherty ok –  Jitendra Vyas Dec 13 '09 at 3:40
 
Upvoted for effort –  David Caunt Dec 13 '09 at 3:41
add comment
up vote 4 down vote

If style is an important issue using a completely custom widget might help, like the one described in blog post Reinventing a Drop Down with CSS and jQuery.

share|improve this answer
 
nice link. That was pretty much what I was looking for. Not perfect, but good enough. –  Ele Munjeli Sep 7 '12 at 4:53
add comment
up vote 4 down vote

Use the clip property to crop the borders and the arrow of the select element, then add your own replacement styles to the wrapper:

<!DOCTYPE html>
<html>
  <head>
    <style>
      select { position: absolute; clip:rect(2px 49px 19px 2px); z-index:2; }
      body > span { display:block; position: relative; width: 64px; height: 21px; border: 2px solid green;  background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
    </style>
  </head>
  <span>
    <select>
      <option value="">Alpha</option>
      <option value="">Beta</option>
      <option value="">Charlie</option>
    </select>
  </span>
</html>

Use a second select with zero opacity to make the button clickable:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #real { position: absolute; clip:rect(2px 51px 19px 2px); z-index:2; }
      #fake { position: absolute; opacity: 0; }

      body > span { display:block; position: relative; width: 64px; height: 21px; background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
    </style>
  </head>
  <span>
    <select id="real">
      <option value="">Alpha</option>
      <option value="">Beta</option>
      <option value="">Charlie</option>
    </select>
    <select id="fake">
      <option value="">Alpha</option>
      <option value="">Beta</option>
      <option value="">Charlie</option>
    </select>
  </span>
</html>

Coordinates differ between Webkit and other browsers, but a @media query can cover that.

share|improve this answer
 
Paul, that would be a good solution, unfortunately you can't click the arrow that way. –  Oliver Schmid Jan 16 '12 at 9:43
 
+1 worked in a lot of browser –  user1432124 May 14 '12 at 12:15
 
Working well for me, at least in chrome: position: absolute; clip: rect(2px 85px 128px 2px); z-index: 2; padding-left: 18px; padding-right: 18px; margin: 7px auto; color: #555; font-size: inherit; background-color: transparent; –  BrianFreud May 19 '12 at 21:35
 
I found cropping off the arrow only half works in IE7 as you have no control over the border of the select. –  CpILL Jun 1 '12 at 8:07
 
Added the click functionality as part of a related question –  Paul Sweatte Dec 5 '12 at 1:39
add comment
up vote 3 down vote 
select  {
    outline: 0;
    overflow: hidden;
    height: 30px;
    background: #2c343c;
    color: #747a80;
    border: #2c343c;
    padding: 5px 3px 5px 10px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 10px;
}

select option {border: 1px solid #000; background: #010;}
share|improve this answer
add comment
up vote 2 down vote

Edit this element is not recommended, but if you want to try it's like any other HTML element.

Edit example:

/*Edit select*/
select {
    /*css style here*/
}

/*Edit option*/
option {
    /*css style here*/
}

/*Edit selected option*/
/*element  attr    attr value*/
option[selected="selected"] {
    /*css style here*/
}

<select>
    <option >Something #1</option>
    <option selected="selected">Something #2</option>
    <option >Something #3</option>
</select>
share|improve this answer
 
@MikkoP: when suggesting edits, would you please provide a more descriptive edit summary? "Improved the message" isn't very helpful as a high-level summary for us reviewers. Thanks. –  Jean-François Corbett Sep 21 '12 at 17:49
 
@Jean-FrançoisCorbett I'll try to be more specific :) –  MikkoP Sep 21 '12 at 17:51
 
you can't style option elements (see this SO answer: stackoverflow.com/a/7208814/703717 ) –  Danield Dec 19 '12 at 12:11
add comment
up vote 2 down vote

You definitely should do it like in Styling select, optgroup and options with CSS. In many ways, background-color and color are just what you would typically need to style options, not the entire select.

share|improve this answer
add comment
up vote 2 down vote

A very nice example that uses :after and :before to do the trick is in Styling Select Box with CSS3 | CSSDeck

share|improve this answer
 
Yes but requirement in question was should compatible to Internet Explorer 6,7 and 8 –  Jitendra Vyas Apr 29 '13 at 5:34
 
Yes It's not compatible with IE but I loved to share for any one looking for a modern solution as I was looking for. –  Ahmad Ajmi Apr 30 '13 at 15:33
add comment
up vote 1 down vote

A very good alternative (pure CSS) is this:

I found it on the MDN website. It uses Fieldset, radio-buttons and editable input fields and labels to create an awesome editable pseudo-select box. Check this out:

https://mdn.mozillademos.org/files/4563/editable_select.html

I know it is not directly answering your question, but it is still worth the look, as you can style "other" elements and simulate a select control without writing any JS code.

Have fun! :)

share|improve this answer
add comment
up vote 1 down vote 
label {
    position: relative;
    display: inline-block;
}
select {
    display: inline-block;
    padding: 4px 3px 5px 5px;
    width: 150px;
    outline: none;
    color: black;
    border: 1px solid #C8BFC4;
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px #ddd8dc;
    background-color: lightblue;
}

This uses a background color for select elements and I removed the image..

share|improve this answer
add comment
up vote 0 down vote

As of Internet Explorer 10, you can use the ::-ms-expand pseudo element selector to style, and hide, the drop down arrow element. 

select::-ms-expand {
    display:none;
    /* or visibility: hidden; to keep it's space/hitbox */
}

The remaining styling should be similar to other browsers.

Here is a basic fork of Danield's jsfiddle that applies support for IE10

share|improve this answer
add comment

protected by Community♦ Jan 2 '13 at 18:05

This question is protected to prevent "thanks!", "me too!", or spam answers by new users. To answer it, you must have earned at least 10 reputation on this site.

Not the answer you're looking for? Browse other questions tagged or ask your own question.