123
user profile image

Faking Mimic a dropdown select, using input radio. Update: See version 2 (http://codepen.io/syndicatefx/pen/LVEbNR)

Comments

  1. What is your definition of faking?

  2. @Boymeetscode by faking i mean it is not really a `` element but tries to mimic one ;)

  3. Interesting idea, is there any reason this couldn't be used in production? It's always lame how you can't style very much.

  4. @ettrics thats part of the reason i came up with this idea. I see no reason why not to use it in production.

  5. It's an interesting experiment, you have done an excellent job. My thoughts:

    1. The whole bar is not clickable as a ``, only the arrow is. Perhaps you could wrap the link around the whole bar?
    2. It is not keyboard accessible, haven't tested but is probably not screen reader accessible either. Accessibility should be doable though.
    3. In theory it IS still semantically correct as a form element (an <output> tag for the result would be cool maybe :)
    4. Also consider that a `` has custom behaviour on devices and even in desktop browsers the dropdown can go up or even hang out the window!
  6. @davidelrizzo Thanks for the comment! You are absolutely right on all points you make, these are definitely a requirement for production use. @ettrics - please consider Davide's points.

    Although this is just a proof of concept, points 1, 2 and 3 are reasonably easy to implement and i'll update the pen soon with these features in mind. Point 4 would be a great addition, but will need more JS tinkering, something to consider...thanks again!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...