CSS for the “down arrow” on a element?

by

There’s a cool CSS-only solution to styling dropdowns here: http://bavotasan.com/2011/style-select-box-using-only-css/

Basically, wrap the select in a container div, style the select to be 18px wider than the container with a transparent background, give overflow:hidden to the container (to chop off the browser-generated arrow), and add your background image with stylized arrow to the container.

Doesn’t work in IE7 (or 6), but seriously, I say if you’re using IE7 you deserve a less-pretty dropdown experience.

More Related Contents:

  1. How I show div by scale effect and give her text
  2. jQuery Adding new option to select element doesn't pick up the string [closed]
  3. Can't able to apply css file in html5
  4. How to change the bootstrap css width into 1000px? [closed]
  5. Alert jQuery + CSS [closed]
  6. jquery change section with scrolling and animation
  7. Slide down button to show text HTML CSS
  8. Click button copy to clipboard
  9. Slide right to left?
  10. Show div on scrollDown after 800px
  11. What is the easiest way to disable/enable buttons and links (jQuery + Bootstrap)
  12. How to remove close button on the jQuery UI dialog?
  13. jQuery on window resize
  14. Add and remove a class on click using jQuery?
  15. Number nested ordered lists in HTML
  16. Making radio buttons look like buttons instead
  17. How do I auto-hide placeholder text upon focus using css or jquery?
  18. jQuery find element by data attribute value
  19. How to fade loop background images?
  20. Why is z-index ignored with position:static?
  21. Can I fade in a background image (CSS: background-image) with jQuery?
  22. Can an iframe only show a certain part of the page?
  23. Bootstrap CSS Active Navigation
  24. JQM (jQueryMobile) Dynamically added elements not displaying correctly and CSS is not applied
  25. Is there a style selector in jQuery?
  26. Justify divs with CSS to fill width of parent container [duplicate]
  27. How to create a diagonal line within a table cell?
  28. Show/ Hide Table Column with colspan using jQuery
  29. JQuery search in static HTML page with highlighting of found word
  30. Possible to have a floating horizontal scrollbar?

Leave a Comment