I have a very specific case where the <select/>
elements in a browser interface are replaced with a custom HTML structure while styling is added via CSS and functionality is added via JavaScript. However, this question applies to these situations in general:
What are the advantages and disadvantages of replacing predefined HTML elements with customized solutions
<div class="select">
<span>Absolute</span>
<ul>
<li>Absolute</li>
<li>Percent</li>
<li>Minutes</li>
<li>Seconds</li>
</ul>
</div>
I am not a fan of this, but I want my argument against it to be more then just a subjective one but instead back it with actual UX-focused best practices and facts.
Pros
- Consistent design across browsers
Cons
- Advanced interaction/shortcuts not possible or require even more JavaScript (Up and down arrows, typing the first letters to jump to option, using the scrollwheel to run through options, etc.)
- Too many edge cases, breaks more often then not (Latest bug: Options change completely, but
<span>
didn't and therefor shows non-existent entry) - Fails on devices with touch interface
I believe there are more and I'd like to present this issue as thought-out as possible. And I think this is an issue that doesn't just apply to the mentioned <select>
.
What are additional arguments and how would you approach this?
<select>
replaced via javascript with this, or is this HTML what is rendered before any javascript is run?<select/>
is ever rendered in the first place. JavaScript is only used to added functionality to the markup.