Does anyone have a solution for styling the borders of "select" elements in Internet Explorer using CSS?
A:
You'd need a custom-designed select box with CSS and JavaScript. You'd need to make absolutely sure it degrades perfectly to a standard select element should a user have JavaScript disabled.
IMO, it's just not worth the effort. Stick with font stylings within the select to make it close to your site's design; leave the borders, etc., to the box elements.
cLFlaVA
2008-12-19 04:02:14
+1
A:
Using ONLY css is impossbile. In fact, all form elements are impossible to customize to look in the same way on all browsers only with css. You can try niceforms though ;)
Ionut Staicu
2008-12-19 20:47:05
Hey, that looks pretty good - have you implemented this on any sites at all?
Sam Murray-Sutton
2009-02-03 13:11:18
I tried once but i didn't like it so i wrote my own script :P
Ionut Staicu
2009-02-06 21:44:09
Nice link, thanks. But (not surprisingly): "The script is fully compatible and has been tested with most major browsers, *with the exception of IE6*."
Daniel Rinser
2010-07-26 11:18:52
@Daniel: IE6 is a 10 years old browser. Don't you want to let it rest in peace? :) Besides that: http://dowebsitesneedtolookexactlythesameineverybrowser.com/ ;)
Ionut Staicu
2010-07-26 16:24:07
Don't get me wrong, I *hate* IE6 (like everyone involved in webdev) and agree 100% that websites shouldn't be designed "pixel-perfect" or expected to look the same in every browser. I just wanted to point this out because the question explicitly states IE6/IE7.
Daniel Rinser
2010-07-27 17:35:26
Daniel, at the time i posted the link, i think v2 wasn't out (or was in beta?). v1 works ok on ie6 too :)
Ionut Staicu
2010-07-27 19:21:20
+4
A:
From my personal experience where we tryed to put the border red when an invalid entry was selected, it is impossible to put border red of select element in IE.
As stated before the ocntrols in internet explorer uses WindowsAPI to draw and render and you have nothing to solve this.
What was our solution was to put the background color of select element light red (for text to be readable). background color was working in every browser, but in IE we had a side effects that the element where the same background color as the select.
So to summarize the solution we putted :
select
{
background-color:light-red;
border: 2px solid red;
}
option
{
background-color:white;
}
Note that color was set with hex code, I just don't remember which.
This solution was giving us the wanted effect in every browser except for the border red in IE.
Good luck
lucian.jp
2008-12-19 21:11:29
A:
Check out this code... hope ur happy :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<style type="text/css">
*{margin:0;padding:0;}
select {font: normal 13px Arial, SansSerif, Verdana; color: black;}
.wrapper{width:198px; position: relative; height: 20px; overflow: hidden; border-top:1px solid #dddddd; border-left:1px solid #dddddd;}
.Select{color: black; background: #fff;position: absolute; width: 200px; top: -2px; left: -2px;}
optgroup{background-color:#0099CC;color:#ffffff;}
</style>
</head>
<body>
<div class="wrapper">
<select class="Select">
<optgroup label="WebDevelopment"></optgroup>
<option>ASP</option>
<option>PHP</option>
<option>ColdFusion</option>
<optgroup label="Web Design"></optgroup>
<option>Adobe Photoshop</option>
<option>DreamWeaver</option>
<option>CSS</option>
<option>Adobe Flash</option>
</select>
</div>
</body>
</html>
Sajay
A:
IE < 8 does not render the dropdown list itself it just uses the windows control which cannot be styled this way. Beginning from IE 8 this has changed and the styling is now applied. Of course, its market share is rather negligible yet.
User
2009-06-16 13:15:58
A:
I've worked around the inability to put a border on the select in IE7 (IE8 in compatibility mode)
By giving it a border as wel as a padding, it looks like something....
Not everything, but it's start...
ReLexEd
2009-06-16 14:52:28
A:
Hi, it solves to me, for my purposes:
.select-container { position:relative; width:200px; height:18px; overflow:hidden; border:1px solid white !important } .select-container select { position:relative; left:-2px; top:-2px }
To put more style will be necessary to use nested divs .
Rafael Berlanda
2010-02-27 18:08:23
A:
To do a border along one side of a select in IE use IE's filters:
select.required { border-left:2px solid red; filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=-2, OffY=0,color=#FF0000) }
I put a border on one side only of all my inputs for required status.
There is probably an effects that do a better job for an all-round border ...
http://msdn.microsoft.com/en-us/library/ms532853(v=VS.85).aspx
damion
2010-05-18 22:11:46
+1
A:
extrapolate it! :)
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0,color=#FF0000) progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0,color=#FF0000) progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1,color=#FF0000) progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1,color=#FF0000);
nemoluca
2010-07-16 14:38:28
A:
IE completly sucks. They should stop trying to make browser.
Robert Broulotte
2010-09-16 16:54:41