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

Question

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?

Answer 1

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.

Answer 2

Hey you can do this as like this

Css

label.custom-select {
    position: relative;
    display: inline-block;

}

    .custom-select select {
        display: inline-block;
        padding: 4px 3px 3px 5px;
        margin: 0;
        font: inherit;
        outline:none; /* remove focus ring from Webkit */
        line-height: 1.2;
        background: #000;
        color:white;
        border:0;
    outline:none;
    }




    /* Select arrow styling */
    .custom-select:after {
        content: "▼";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        font-size: 60%;
        line-height: 30px;
        padding: 0 10px;
        background: green;
        color: white;
    }

    .no-pointer-events .custom-select:after {
        content: none;
    }

HTML

<label class="custom-select">

    <select>
        <option>Sushi</option>
        <option>Blue cheese with crackers</option>
        <option>Steak</option>
        <option>Other</option>
    </select>
</label>

Live demo here http://jsfiddle.net/rohitazad/XxkSC/555/