Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to create a custom design(with image) for an html select tag(crossbrowser)?

How to create a custom design(with image) for an html select tag(crossbrowser)?

Problem

I'm trying to find a way of creating a crossbrowser(all major browsers) Select tag with a custom design that meet the requirements:

  • Uses a few lines of code
  • Crossbrowser
  • Fast (don't load 1-2 seconds after user sees the page)
  • Easy to replicate

Some I found works only on firefox and other using webkit but messing with other styles. Then I started frying some brain cells to check my options. And I tried these:

1st Solution

Using an image as background with only css, but I couldn't remove the border on chrome when active. Due to -webkit-appearance: none; the arrow is removed(which is great), but I can't do it on firefox.

2nd Solution

Trying to replacing/using the select as a div with jquery's help where some people advised using this plugin made by some guys on bulgaria, which seems great, but I still think it's too fancy.

3rd Solution

Adding a span/div tag at the top of the select. I spent some time on this one and couldn't do it by my own. Found a question from 1 year ago about a problem I encountered while trying to implement, that was simulating a click on the select tag(as if the user had clicked). Finally I decided to go with uniform. Although their plugin does more than I need, it fits to solve the problem too.


The 1st Solution couldn't solve my problem at all(maybe wrong approach or css code). The 2nd and 3rd uses too many lines of code(being plugins and all). Is there any other way I didn't think about or something that matches all requirements?

Problem courtesy of: Guilherme David da Costa

Solution

Formalize is a rather tidy and straightforward plugin. Yes, it is jquery-dependent, but assuming the site's architecture is of high quality it would not impact rendering after the .js files are first cached.

If your website uses ajax heavily for page content delivery, any pre-domready flash of unstyled content could be avoided altogether.

Solution courtesy of: o.v.

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How to create a custom design(with image) for an html select tag(crossbrowser)?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×