...

View Full Version : Example of changing <select> border color in css



titanic_fanatic
07-06-2005, 03:52 PM
Ok... So I am trying to change the border color of a select field and everyone says it can't be done, but it can. See http://www.nic.fi/~tapio1/Teaching/Models/Model23b.html when you put your mouse over top of the select box, it outlines in red. I put the css from this page into my contact form http://www.rollersports.ca/contacts.htm , and it doesn't work... Can anyone tell me why?

coothead
07-06-2005, 06:15 PM
Hi there titanic_fanatic,

as i pointed out in your other thread (http://www.codingforums.com/showthread.php?t=62721), only Opera appears to give select border styling full support. :)

To get a slight border in Firefox or your favourite - Netscape 8 - change this line in your stylesheet....

select {
width: 125px;
border-right: red 2px solid;
border-top: red 2px solid;
border-left: red 2px solid;
border-bottom: red 2px solid;
background-color: #ffffff;
}
...to this...

select {
width: 125px;
border-right: red 2px solid;
border-top: red 2px solid;
border-left: red 2px solid;
border-bottom: red 2px solid;
background-color: #fffffe;
}
...and you will perceive a thin red line on the top and sides, but you will not be able to give this
'pseudo border' any width whatsoever. ;)
As for IE there is only the default border.

coothead

titanic_fanatic
07-06-2005, 06:32 PM
Thank you so much... That fixed everything. It's exactly what I wanted.

If you don't mind me asking, why is it that I needed to change the background color to #fffffe instead of #ffffff?

coothead
07-06-2005, 06:40 PM
Hi there titanic_fanatic,

If you don't mind me asking, why is it that I needed to change the background color to #fffffe instead of #ffffff?
Well, your guess is as good as mine. :D
The border will only make an appearance if the background-color is not set to #ffffff. :D

coothead



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum