The HTML <select> tagOn styling it and the challenge it presents
The W3C Specification says:• The <select> element represents a  control for selecting amongst a set of  options.           ...
Firefox 10 Mac OS                 IE7 Windows XPChrome 17 Mac OS                  Firefox 10 Windows XP                   ...
Firefox 10 Mac OS       IE7 Windows XP                       Chrome 17 Windows XP                                         ...
Firefox 10 Mac OS   IE7 Windows XP          Chrome 17 Windows XP        Firefox 10 Windows XPMore CSS Styling             ...
Firefox 10 Mac OSLimitations                        IE7 Windows XPThe <select> arrow can’t bestyled and varies from browse...
Firefox 10 Mac OS                                  IE7 Windows XPLimitationsUnfortunately, the mousehovered <option> color...
Styled <span>Alternatives                                         sitting on top of                                       ...
Firefox 10 Mac OSAlternativesReplace <option> tags.With JavaScript we can replaceeach <option> tag for another            ...
De-facing                            <option>                         replacement to                                      ...
The price of the alternatives (technical & long)• All the JavaScript alternatives put work-load on the browser.• JavaScrip...
A test case - www.moneygram.com• There are 5 <select> tags and 569 <option> tags on page-load.• Some <select> tags get pop...
Analysis• The a site like www.moneygram.com has too many <option> tags (500+)  because most of them are part of a country ...
Upcoming SlideShare
Loading in …5
×

The HTML select tag styling challenge

26,957 views

Published on

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

Published in: Technology, News & Politics
2 Comments
5 Likes
Statistics
Notes
  • Can anyone help about UI in IE10. In IE10 UI of select option drop down menu is change compare to previous versions. How can I fix it with the help of CSS and without using any JS libraries.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I am not login in my facebook account and the dp its showing does not exist in my profile any more i deleted it few months ago :P what is this :D
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
26,957
On SlideShare
0
From Embeds
0
Number of Embeds
367
Actions
Shares
0
Downloads
44
Comments
2
Likes
5
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • The HTML select tag styling challenge

    1. 1. The HTML <select> tagOn styling it and the challenge it presents
    2. 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. 3. Firefox 10 Mac OS IE7 Windows XPChrome 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. 4. Firefox 10 Mac OS IE7 Windows XP Chrome 17 Windows XP Firefox 10 Windows XP Fifefox 10 Windows 7CSS StylingBasic styling over the <select>tag.Things get messy and IE8 Windows 7 Chrome 17 Windows 7unpredictableCSS:
    5. 5. Firefox 10 Mac OS IE7 Windows XP Chrome 17 Windows XP Firefox 10 Windows XPMore CSS Styling IE8 Windows 7 Firefox 10 Windows 7Advanced styling over the<style> and <option> tags Chrome 17 Windows 7
    6. 6. Firefox 10 Mac OSLimitations IE7 Windows XPThe <select> arrow can’t bestyled and varies from browser-to-browser and OS. Firefox 10 Windows 7
    7. 7. Firefox 10 Mac OS IE7 Windows XPLimitationsUnfortunately, the mousehovered <option> color can’t bestyled. It is set by the OS. Chrome 17 Windows 7
    8. 8. Styled <span>Alternatives sitting on top of <select> tagDe-facingWith JavaScript we can hide the<select> tag and place a <span>tag on top of it which can be freelystyled. Default HTML scrollbar forThe <option> tags conserve the <option>default HTML behavior. tags <option> tags conserve HTML behavior
    9. 9. Firefox 10 Mac OSAlternativesReplace <option> tags.With JavaScript we can replaceeach <option> tag for another IE 7 Windows XPHTML tag that allows properstyling.Source:http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/index.html
    10. 10. De-facing <option> replacement to CustomA very styled control hovered style color scroll-bar replacement<select> menuDe-facing<option> replacementScroll-bar replacement Semi-transparent background
    11. 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. 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. 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.

    ×