Styling select options


/ Published in: CSS
Save to your folder(s)

In modern browsers select options can now be style using most css properties. Of course, IE is still behind but it does support some styling as well. There are a lot more options on the site.


Copy this code and paste it in your HTML
  1. function setposition()
  2. {
  3. algset = new Array('left','right','center');
  4. sel=document.getElementById('theselect');
  5. sel.style.backgroundColor='blue';
  6. sel.style.textAlign='center';
  7. sel.style.color='orange';
  8. for (i=0;i<sel.options.length;i++)
  9. {
  10. if (i%2 ==0)
  11. {
  12. clr='white'; bclr='green';
  13. }
  14. else
  15. {
  16. clr='navy'; bclr='orange';
  17. }
  18. sel.options[i].style.color=clr;
  19. sel.options[i].style.backgroundColor=bclr;
  20. sel.options[i].style.textAlign=algset[i%3];
  21. }
  22. }

URL: http://coboldinosaur.com/pages/Styling_Options_for_Options.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.