[CSS][JavaScript]Niestandardowy Select - option w JS tj. zmianaStrzałki

[CSS][JavaScript]Niestandardowy Select - option w JS tj. zmianaStrzałki

gecior Zobacz profil	8.12.2008, 01:09:23 Post #1
Grupa: Zarejestrowani Postów: 63 Pomógł: 1 Dołączył: 16.08.2007 Ostrzeżenie: (0%)	Cześć, mam kod ktory powoduje rozwiniecie listy linkow, stylami sie nie interesujcie, chodzi mi o java script w ktorym jestem jak narazie bardzo cienki, przy cieciu stronki, spotkalem sie z tym ze nalezy zmienic wyglad pól select, znalazlem w necie ten kod, niby jest ok, ale to sa odsylacze, a mi chodzi o to aby zrobic z tego pola zwykłe standardowe pole <select><option></option></select> z zachowaniem tych stylow, prosilbym o przerobienie tego na taki wlasnie sposob, lub jakies wskazowki, bo mysle ze jest to proste do zrobienia (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) Bede dziekowac za pomoc, ps. nie piszcie o tym ze nie powinno zmieniac wygladu tych pol, ja to wiem (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) CODE <!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> <title>select BOX</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> <!-- body,td,th { font-family: verdana; font-size: small; color: #009999; } body { background-color: #FFFFFF; margin-left: 2em; margin-top: 2em; } --> br{ line-height:0;} #innermenu a{ text-decoration:none; } #innermenu a:hover{ background-color:#00FFFF; } div{ padding:0; margin:0; } #search{ width:150px; height:auto; border:1px solid white; } a.drop{ display:block; font-size:0.9em; font-weight:normal; color:#666; text-decoration:none; width:146px; height:12px; padding:1px; background-image:url("arrow_over.gif"); background-repeat:no-repeat; background-position:right; text-align:left; cursor:hand; border:1px solid #006699; } a.drop:hover{ font-size:0.9em; font-weight:normal; color:#666; text-decoration:none; display:block; width:146px; height:12px; padding:1px; background-image:url("arrow_over.gif"); background-repeat:no-repeat; background-position:right; text-align:left; cursor:hand; border:1px solid #006699; } #dropdown{ font-size:0.9em; z-index:10; width:148px; height:auto; background-color:#FFFFFF; border:1px solid #006699; border-top:0; visibility:hidden; } #dropdown ul{ padding:0; margin:0; list-style-type:none;} #dropdown li{ padding:0; margin:0;} #dropdown a{ display:block; background-color:#fff; padding:2px 4px; margin:0; text-decoration:none; color:#666; } #dropdown a:hover{ display:block; background-color:#0099FF; padding:2px 4px; margin:0; text-decoration:none; color:#fff; } </style> <script type="text/javascript"> function showhide(whichLayer) { if (document.getElementById) { // this is the way the standards work var style2 = document.getElementById(whichLayer).style; style2.visibility = style2.visibility? "":"visible"; } } </script> </head> <body> <div id="search"> <a href="java script:showhide('dropdown');" on class="drop">Show all links</a> <div id="dropdown" onmouseout="showhide('dropdown');"> <a href="#"> Link 1</a><br /> <a href="#">Link 2</a><br /> <a href="#">Link 3</a><br /> <a href="#">Link 4</a><br /> <a href="#">Link 5</a><br /> <a href="#">Link 6</a><br /> <a href="#">Link 7</a><br /> <a href="#">Link 8</a><br /> </div> </div> </body> </html>