Changing look of dropdown boxes using CSS

**Frogger** · 07-12-2006, 11:34 PM

Hi All,

I know you can change the look on input boxes using CSS. ie changing border size, colour and text area but for some reason I can't do the same using the select function (ie dropdowns). Is there a way of doing this using CSS or is this function restricted on dropdowns.

Thanks for your help.

Regards
Frogger

**jscheuer1** · 07-18-2006, 03:22 AM

It depends upon the browser but, almost all browsers have certain limitations when it comes to styling the select element. Its functionality is paramount and as it has a rather complex functionality compared to other elements, this I suppose is why style has been given short shrift. However greater control than you realize may be possible, certainly in some browsers. What exactly did you want your select element to look like?

**Frogger** · 07-18-2006, 03:26 AM

Thanks for getting back to me. Just wanted to change the border colour and the arrow box. I know changing the fonts style and size along with the background colour is possible to do.

Regards
Frogger

**jscheuer1** · 07-18-2006, 03:48 AM

As far as I know the arrow box is off limits. The border may be able to be manipulated in some, if not all browsers. For example, you can do custom borders in FF and Opera but not in IE. However, borders are usually easy to simulate but, perhaps not with a select, I'll look into that.

**jscheuer1** · 07-18-2006, 04:11 AM

This type of scheme seems to do borders in IE and other browsers but it is tricky:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#sel select {
height:100%;
}
* html #sel select {
margin-bottom:5px;
}
#sel {
border:5px solid green;
}
body>#sel {
border-top-width:6px;
border-bottom-width:7px;
}
</style>
</head>
<body><br>
<span id="sel"><select>
<option>jjjjj</option>
<option>jjjjj</option>
<option>jjjjj</option>
<option>jjjjj</option>
<option>jjjjj</option>
</select></span>
</body>
</html>

Here are the styles commented:

Code:

#sel select {
height:100%; /*Opera needs this for a balanced look*/
}
* html #sel select {
margin-bottom:5px; /*IE needs this or the bottom border does not render, set to border width*/
}
#sel {
border:5px solid green; /*for all browsers*/
}
body>#sel { /*for all except IE, adjust as needed for even appearance*/
border-top-width:6px;
border-bottom-width:7px;
}

Thread: Changing look of dropdown boxes using CSS

Thread Tools

Search Thread

Changing look of dropdown boxes using CSS

Bookmarks

Bookmarks

Posting Permissions