/ Published in: JavaScript
Unable to use CSS for select tag?
Simple changes approve it.
P.S. Don't forget about prototype framework ()
Simple changes approve it.
P.S. Don't forget about prototype framework ()
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
<html> <head> <script type='text/javascript' src='js/prototype.js'></script> <script type='text/javascript'> function change_country(type, value) { $('country_type').value=type; $('country_value').value=value; } </script> <style type="text/css"> #select_countries { border: 1px solid #333; margin-top: 5px; height: 200px; width: 200px; overflow: auto; } </style> </head> <body> <form action="" method="post"> <fieldset> <legend>Countries</legend> <input type="text" name="country_value" id="country_value" value="United States" /> <input type="hidden" name="country_type" id="country_type" value="us" /> <a href="#" onclick="Element.show('select_countries'); return false;">Click to change</a><br /> <div id="select_countries" style="display: none;"> <div id="close" onclick="Element.hide('select_countries'); return false;">Close</div> <div onclick="change_country('us', 'United states')"><img src="images/flags/us.gif" alt="us" /> United states</div> <div onclick="change_country('ru', 'Russia')"><img src="images/flags/ru.gif" alt="us" /> Russia</div> <div onclick="change_country('es', 'Spain')"><img src="images/flags/es.gif" alt="us" /> Spain</div> <div onclick="change_country('ca', 'Canada')"><img src="images/flags/ca.gif" alt="ca" /> Canada</div> </div> </fieldset> </form> </body> </html>