Your SlideShare is downloading. ×
0
The HTML select tag styling challenge
The HTML select tag styling challenge
The HTML select tag styling challenge
The HTML select tag styling challenge
The HTML select tag styling challenge
The HTML select tag styling challenge
The HTML select tag styling challenge
The HTML select tag styling challenge
The HTML select tag styling challenge
The HTML select tag styling challenge
The HTML select tag styling challenge
The HTML select tag styling challenge
The HTML select tag styling challenge
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

The HTML select tag styling challenge

24,931

Published on

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

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
24,931
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
38
Comments
2
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    1. The HTML <select> tagOn 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 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. 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. 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. 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. 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. 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. 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. 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. 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.

    ×