CSS3 pointer-events

Improve look of a Select, thanks to CSS3 property pointer-events.

by bruscopelliti

HTML

<div class="container">
    <label for="city">
        <img src="http://brunoscopelliti.com/resources/images/arrow.png" title="Open" />
    </label>
    <select id="city" name="city">
        <option value="1">Rome</option>
        <option value="2">Milan</option>
        <option value="3">Florence</option>
        <option value="4">Naples</option>
    </select>
</div>

CSS

.container {
    display:inline-block;
    position:relative;
}
.container label {    
    pointer-events:none;
    position:absolute;
    right:0;
}
.container select {
    min-width:120px;
}