How to create a custom design(with image) for an html select tag(crossbrowser)?
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
- 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:
Using an image as background with only css, but I couldn't remove the border on chrome when active.
-webkit-appearance: none; the arrow is removed(which is great), but I can't do it on firefox.
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.
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?
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.
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here