The HTML select tag styling challenge
Download as KEY, PDF6 likes17,773 views
The <select> tag allows users to select from a set of options but presents styling challenges. It can't be freely styled with CSS and displays inconsistently across browsers and operating systems. Alternatives like replacing <select> and <option> tags with other HTML elements and using JavaScript allow for more custom styling but put significant workload on the browser. For sites with many options, this approach can consume a large portion of available memory. The document recommends the de-facing alternative of hiding the <select> tag and placing a styled <span> on top as a less intensive option.
The HTML select tag styling challenge
- 1. The HTML <select> tag On styling it and the challenge it presents
- 2. The W3C Specification says: • The <select> element represents a control for selecting amongst a set of options. HTML Code • Children tags are the options represented by the tag <option> • Attributes: autofocus, disabled, form, multiple, name, required, size • Source: http://www.w3.org/wiki/HTML/ Elements/select - (examples are shown using a Mac Operating System)
- 3. Firefox 10 Mac OS IE7 Windows XP Chrome 17 Mac OS Firefox 10 Windows XP Chrome 17 Windows XP Raw Style This is how the <select> looks IE8 Windows 7 like on different browsers and Operating Systems with no CSS styles applied. Firefox 10 Windows 7 Chrome 17 Windows 7
- 4. Firefox 10 Mac OS IE7 Windows XP Chrome 17 Windows XP Firefox 10 Windows XP Fifefox 10 Windows 7 CSS Styling Basic styling over the <select> tag. Things get messy and IE8 Windows 7 Chrome 17 Windows 7 unpredictable CSS:
- 5. Firefox 10 Mac OS IE7 Windows XP Chrome 17 Windows XP Firefox 10 Windows XP More CSS Styling IE8 Windows 7 Firefox 10 Windows 7 Advanced styling over the <style> and <option> tags Chrome 17 Windows 7
- 6. Firefox 10 Mac OS Limitations IE7 Windows XP The <select> arrow can’t be styled and varies from browser- to-browser and OS. Firefox 10 Windows 7
- 7. Firefox 10 Mac OS IE7 Windows XP Limitations Unfortunately, the mouse hovered <option> color can’t be styled. It is set by the OS. Chrome 17 Windows 7
- 8. Styled <span> Alternatives sitting on top of <select> tag De-facing With JavaScript we can hide the <select> tag and place a <span> tag on top of it which can be freely styled. Default HTML scrollbar for The <option> tags conserve the <option> default HTML behavior. tags <option> tags conserve HTML behavior
- 9. Firefox 10 Mac OS Alternatives Replace <option> tags. With JavaScript we can replace each <option> tag for another IE 7 Windows XP HTML tag that allows proper styling. Source: http://jquery-ui.googlecode.com/svn/branches/ labs/selectmenu/index.html
- 10. De-facing <option> replacement to Custom A very styled control hovered style color scroll-bar replacement <select> menu De-facing <option> replacement Scroll-bar replacement Semi-transparent background
- 11. The price of the alternatives (technical & long) • All the JavaScript alternatives put work-load on the browser. • JavaScript works with the code delivered from BackEnd: <select> and <option> tags. De-facing: <option> replacement: • Each <select> tag is hidden. • Each <select> tag is replaced with 1 <a> tag and 2 <span> tags. • A <span> tag is introduced. • 5 JS events are attached to the • Both get wrapped in a <div> <a> tag. element. • Each <option> tag is replaced Scroll-bar replacement: with a <li> & <a> tag and wrapped in a <ul> tag. • 4 <div> elements created to mock a styled scroll-bar. • 6 JS events are attached to each <li> tag to emulate the HTML • 4 JS events are attached to each behavior of the <select> & <select> menu. <option> tags.
- 12. A test case - www.moneygram.com • There are 5 <select> tags and 569 <option> tags on page-load. • Some <select> tags get populated by AJAX calls after page-load, increasing the number of <option> tags. Costs for the browser: • 594 HTML tag replacements. • 3.459 JavaScript event attachments. • Each time an AJAX call is made, new <option> tags come - HTML tag replacements and event attachments must be made on-the-spot. • Our tests show that this process alone consumes 23% of the browsers available memory against 2% for the un-styled HTML approach. • This is 11.5 times as intensive. Too much!
- 13. Analysis • The a site like www.moneygram.com has too many <option> tags (500+) because most of them are part of a country selection list with 180+ countries. • We don’t recommend using the <option> JavaScript replacement option as it consumes almost 1/4 of the browser’s memory. • Users are already familiar with the default HTML behavior for <select> menus on different browsers and Operating Systems. • The de-facing alternative offers a good styling option for the un-dropped <select> menu and it’s not so intensive for the browser.