Skinnable Select box

[cornae]

I would like to skin select boxes in a way that works for all browsers. I can achieve that in CSS with a little help from .js. What I need is the the content of the selected option tag to be plotted as the value of a data attribute 'data-option'.

For instance, the following markup:

<label>
    Take your pick
    <select>
        <option>
            Item A
        </option>
        <option selected="selected">
            Item B
        </option>
    </select>
</label>

Would be converted into:

<label data-option="Item B">
    Take your pick
    <select>
        <option>
            Item A
        </option>
        <option selected="selected">
            Item B
        </option>
    </select>
</label>

[cornae]

That's even quicker than I expected :)