HTML5, CSS3 & JS Experiments

By Martin Ivanov

Selectbox Icons for Firefox

Demo

Click the select box below to expand its options list. Note that this solution works only in Firefox.

Usage and Code Insight

            
            <p>Click the select box below to expand its options list. Note that this 
                solution works only in <strong>Firefox</strong>.</p>
            
            <select class="acidjs-cssw-select-icons">
                <option selected="selected" value="0">Option 1</option>
                <option value="1">Option 2</option>
                <option value="2">Option 3</option>
                <option value="3">Option 4</option>
                <option value="4">Option 5</option>
            </select>
        

.acidjs-cssw-select-icons option::before
{
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin: 2px 6px 2px 2px;
    width: 16px;
    height: 16px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAB7klEQVR4XqXTv0vVURjH8ffnnHPvtVs3zLIGLWkIdKlIaYsWaW1oCCJabHDtP4jWFgO7ZEtL4ZhLRI5Boz++OhQGmhFoZnavF+/V6/2eJ7qi4uAQvuBMB94PPPDIzDgKxxGF2ZH+sdio37aYAiDnkQ+zkrsM4gCBACR2/zQ9fMOuDL6C7QZN3jM5fA/5gCQOEnIOF7Jf5HwPQLAYYXuL+txTzESm4w7XBl+DE00S7IYEhEBSfNDt5XqRJgIAtgHhGMLTWHkPvEOAnLA0UqtUEYCMbMddMKNSrV8vHM/9CwjSKi7TAvKI/ckxpsx9SqiVKoAhDPQY5wP5TKZoMX2yE9AWyFEr15D2NsXi5BztF9o4e78IMQVs5wnIZEleDJwJcoLGOl8/Jmz8WWePia7eS5zqOM32/BBmEWwn4POd1F03q+X6eECO6tICLkDfo1FIU0CAJ/1eJJoDZRFGk0V8vovS5xm+rWy+CZKjsrTIyc4e2Jgnro5jOEDgczgc+wwpQMsJfs8nPHw2PRbkRHn5B519N6GxhHIFhKNJ4iBDmTaqywv8XF79MDPSvx6QqK2VyF88D5sl5FsBcahcK2sTUyz+2hw9114gmKniQigkI8+xGDEAxGEkMLnywNDU29mXtxBwFfD8nwaQABz5nP8CqkC8PJZRjDcAAAAASUVORK5CYII=") no-repeat center;
}