A study on the challenge for FrontEnd developers for styling this HTML tag.

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.