Stylable <select> wrapper

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/master/prefixfree.min.js"></script>
<select>
    <option>bar</option>
    <option>baz</option>
</select>

CSS

.select-wrapper {
    position: relative;
}

.select-wrapper > * {
    height: 100%;
    width: 100%;
}

.select-wrapper > div {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    padding: 0 4px;
    box-sizing: border-box;
    
    background-color: black;
    color: white;
}


.select-wrapper > div::after {
    content: "▾"; /*▴*/
    float: right;
    padding-right: 30px;
}

JavaScript

$("select")
    .wrap("<div class='select-wrapper'/>")
    .after("<div/>")
    .change(function(event) {
        $(this).next().text($(this).val());
    })
    .trigger("change");