Does anyone have a solution for styling the borders of "select" elements in Internet Explorer using CSS?
This question is related to
css
internet-explorer
internet-explorer-6
internet-explorer-7
cross-browser
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);
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
The border-style property is a short-hand command to define the border styles of all sides an html element. Each side can have a different style.
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.
i was having this same issue with ie, then i inserted this meta tag and it allowed me to edit the borders in ie
<meta http-equiv="X-UA-Compatible" content="IE=100" >
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
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.
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
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
Just add an doctype declaration before the html tag
ex.: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
It is gonna work in JSP files as well. For further info: HTML Doctype Declaration
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 ;)
Just add an doctype declaration before the html tag
ex.: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
It is gonna work in JSP files as well. For further info: HTML Doctype Declaration
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
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.
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 ;)
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
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
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 ;)
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.
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...
i was having this same issue with ie, then i inserted this meta tag and it allowed me to edit the borders in ie
<meta http-equiv="X-UA-Compatible" content="IE=100" >
It works!!! Use the following code:
<style>
div.select-container{
border: 1px black;width:200px;
}
</style>
<div id="status" class="select-container">
<select name="status">
<option value="" >Please Select...</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
</div>
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
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 .
The border-style property is a short-hand command to define the border styles of all sides an html element. Each side can have a different style.
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...
It works!!! Use the following code:
<style>
div.select-container{
border: 1px black;width:200px;
}
</style>
<div id="status" class="select-container">
<select name="status">
<option value="" >Please Select...</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
</div>
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 ;)
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.
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);
Source: Stackoverflow.com