If you need to customize a list box then the <select> HTML element might not be enough. In such a case you’d like to have something that simulates the <select> behaviour.
Here is the code to use to obtain a custom list box:
<html> <head> </head> <body> <div style="width: 200px; height: 200px; overflow: auto;"> <table width="100%" height="100%"> <script> for (var i = 0; i < 30; i++) if (i % 2 == 0) document.write( "<tr style='background-color:#0066ff; color: #ffffff'>" + "<td>JavaScript</td></tr>"); else document.write( "<tr style='background-color:#ff6600; color: #ffffff'>" + "<td>JavaScript</td></tr>"); </script> </table> </div> </body> </html>
The key CSS element is overflow. If you use overflow: auto then the scrollbars are displayed only if they are needed. If you want to display them in any case then you need to use overflow: scroll.
