im working on a website and i was wondering if there is a way to customize the scroll bars for selection and jump menus (form objects) using css... the reason i ask is because i know yyou can customize the main scroll bars on your site, but is it possible to do this inside the form tag? so far i have only been able to change the font and background color of the selsction list, not the scrollbar<br />
<br />
if anyone knows whether this is possible or if theyve ever seen it done please let me know<br />
<br />
thanks<br />
--josh<!--content-->here's an example for divs, I haven't tested it on forms<br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br />
<br />
<html><br />
<head><br />
<title>Untitled</title><br />
<style type="text/css"><br />
<!--<br />
#mydiv1 {<br />
height: 100px;<br />
width: 100px;<br />
margin: 50px;<br />
overflow: auto;<br />
scrollbar-face-color:#000099; <br />
scrollbar-arrow-color:#000099; <br />
scrollbar-track-color:#000099; <br />
scrollbar-shadow-color:#000099; <br />
scrollbar-highlight-color:#000099; <br />
scrollbar-3dlight-color:#000099; <br />
scrollbar-darkshadow-Color:#000099; <br />
}<br />
#mydiv2 {<br />
height: 100px;<br />
width: 100px;<br />
margin: 50px;<br />
overflow: auto;<br />
scrollbar-face-color:#ffff00; <br />
scrollbar-arrow-color:#ffff00; <br />
scrollbar-track-color:#ffff00; <br />
scrollbar-shadow-color:#ffff00; <br />
scrollbar-highlight-color:#ffff00; <br />
scrollbar-3dlight-color:#ffff00; <br />
scrollbar-darkshadow-Color:#ffff00; <br />
}<br />
--><br />
</style><br />
<br />
</head><br />
<body><br />
<div id="mydiv1"><br />
sdiuf sduh opshdg ohsgo h[ozihrs[ojaepioisrg hlkndsk ufhglkdnkjgs pojous rhdlghs kljhf jhnku slid sdhg lshgkuhxkjgh jkxhg s<br />
</div><br />
<br />
<div id="mydiv2"><br />
sdiuf sduh opshdg ohsgo h[ozihrs[ojaepioisrg hlkndsk ufhglkdnkjgs pojous rhdlghs kljhf jhnku slid sdhg lshgkuhxkjgh jkxhg s<br />
</div><br />
</body><br />
</html><!--content-->thanks for your quick reply, but thats not exactly what i had in mind, i was thinking more along the lines of this guy:<br />
<br />
<html><br />
<head><br />
<title>dropdown</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><br />
</head><br />
<br />
<body><br />
<select name="droppy"><br />
<option selected>option1</option><br />
<option>option2</option><br />
<option>option 3</option><br />
<option>option4</option><br />
<option>option 5</option><br />
<option>option6</option><br />
<option>option7</option><br />
<option>option8</option><br />
<option>option 9</option><br />
<option>option2</option><br />
<option>option 3</option><br />
<option>option4</option><br />
<option>option 5</option><br />
<option>option6</option><br />
<option>option7</option><br />
<option>option8</option><br />
<option>option 9</option><br />
<option>option2</option><br />
<option>option 3</option><br />
<option>option4</option><br />
<option>option 5</option><br />
<option>option6</option><br />
<option>option7</option><br />
<option>option8</option><br />
<option>option 9</option><br />
</select><br />
</body><br />
</html><br />
<br />
can you change the scrollbars and down arrow button on those menus?<br />
<br />
thanks<br />
--josh<!--content-->select { <br />
height: 100px; <br />
width: 100px; <br />
margin: 50px; <br />
overflow: auto; <br />
scrollbar-face-color:#ffff00; <br />
scrollbar-arrow-color:#ffff00; <br />
scrollbar-track-color:#ffff00; <br />
scrollbar-shadow-color:#ffff00; <br />
scrollbar-highlight-color:#ffff00; <br />
scrollbar-3dlight-color:#ffff00; <br />
scrollbar-darkshadow-Color:#ffff00; <br />
} <br />
<br />
I've tested it this way, but it doesn't work. It's probably one of those ones that just won't work properly. Maybe you could simulate it by using a scrolling div and radio button. It just depends how much your colored scrollbars mean to you!<!--content-->thanks, i appreciate it<!--content-->
<br />
if anyone knows whether this is possible or if theyve ever seen it done please let me know<br />
<br />
thanks<br />
--josh<!--content-->here's an example for divs, I haven't tested it on forms<br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br />
<br />
<html><br />
<head><br />
<title>Untitled</title><br />
<style type="text/css"><br />
<!--<br />
#mydiv1 {<br />
height: 100px;<br />
width: 100px;<br />
margin: 50px;<br />
overflow: auto;<br />
scrollbar-face-color:#000099; <br />
scrollbar-arrow-color:#000099; <br />
scrollbar-track-color:#000099; <br />
scrollbar-shadow-color:#000099; <br />
scrollbar-highlight-color:#000099; <br />
scrollbar-3dlight-color:#000099; <br />
scrollbar-darkshadow-Color:#000099; <br />
}<br />
#mydiv2 {<br />
height: 100px;<br />
width: 100px;<br />
margin: 50px;<br />
overflow: auto;<br />
scrollbar-face-color:#ffff00; <br />
scrollbar-arrow-color:#ffff00; <br />
scrollbar-track-color:#ffff00; <br />
scrollbar-shadow-color:#ffff00; <br />
scrollbar-highlight-color:#ffff00; <br />
scrollbar-3dlight-color:#ffff00; <br />
scrollbar-darkshadow-Color:#ffff00; <br />
}<br />
--><br />
</style><br />
<br />
</head><br />
<body><br />
<div id="mydiv1"><br />
sdiuf sduh opshdg ohsgo h[ozihrs[ojaepioisrg hlkndsk ufhglkdnkjgs pojous rhdlghs kljhf jhnku slid sdhg lshgkuhxkjgh jkxhg s<br />
</div><br />
<br />
<div id="mydiv2"><br />
sdiuf sduh opshdg ohsgo h[ozihrs[ojaepioisrg hlkndsk ufhglkdnkjgs pojous rhdlghs kljhf jhnku slid sdhg lshgkuhxkjgh jkxhg s<br />
</div><br />
</body><br />
</html><!--content-->thanks for your quick reply, but thats not exactly what i had in mind, i was thinking more along the lines of this guy:<br />
<br />
<html><br />
<head><br />
<title>dropdown</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><br />
</head><br />
<br />
<body><br />
<select name="droppy"><br />
<option selected>option1</option><br />
<option>option2</option><br />
<option>option 3</option><br />
<option>option4</option><br />
<option>option 5</option><br />
<option>option6</option><br />
<option>option7</option><br />
<option>option8</option><br />
<option>option 9</option><br />
<option>option2</option><br />
<option>option 3</option><br />
<option>option4</option><br />
<option>option 5</option><br />
<option>option6</option><br />
<option>option7</option><br />
<option>option8</option><br />
<option>option 9</option><br />
<option>option2</option><br />
<option>option 3</option><br />
<option>option4</option><br />
<option>option 5</option><br />
<option>option6</option><br />
<option>option7</option><br />
<option>option8</option><br />
<option>option 9</option><br />
</select><br />
</body><br />
</html><br />
<br />
can you change the scrollbars and down arrow button on those menus?<br />
<br />
thanks<br />
--josh<!--content-->select { <br />
height: 100px; <br />
width: 100px; <br />
margin: 50px; <br />
overflow: auto; <br />
scrollbar-face-color:#ffff00; <br />
scrollbar-arrow-color:#ffff00; <br />
scrollbar-track-color:#ffff00; <br />
scrollbar-shadow-color:#ffff00; <br />
scrollbar-highlight-color:#ffff00; <br />
scrollbar-3dlight-color:#ffff00; <br />
scrollbar-darkshadow-Color:#ffff00; <br />
} <br />
<br />
I've tested it this way, but it doesn't work. It's probably one of those ones that just won't work properly. Maybe you could simulate it by using a scrolling div and radio button. It just depends how much your colored scrollbars mean to you!<!--content-->thanks, i appreciate it<!--content-->