ansaurus

Question

How to style <select> dropdown with css only without javascript?

Answer 1

+3 A:

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>

Dave Ward 2009-12-13 03:36:41

i'm not talking about like this i want to change dropdown arrow to something else

metal-gear-solid 2009-12-13 03:38:23

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 2009-12-13 03:39:15

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 2009-12-13 03:39:54

@Ryan Doherty ok

metal-gear-solid 2009-12-13 03:40:02

Upvoted for effort

David Caunt 2009-12-13 03:41:36

Answer 2

+3 A:

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

This link 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 does not necessarily make sense to try anyways."

pavium 2009-12-13 03:43:55

Answer 3

+4 A:

<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"&gt;
<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;
}

jeremyosborne 2009-12-13 03:48:31

Answer 4

A:

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

gecko 2010-09-01 15:13:56

ansaurus

tags:

views:

answers:

How to style <select> dropdown with css only without javascript?

related questions