Styled select for blogpost: http://rbrtsmith.com/2014/12/how-to-style-a-select-box/

styled-select--html

<div class="styled-select">
    <label class="styled-select__label">
        Select Country
    </label>
    <select class="styled-select__select js-styled-select__select" name="countries" id="countries">
        <option value="" selected disabled>Select Country</option>
        <option value="United Kingdom">United Kingdom</option>
        <option value="Germany">Germany</option>
        <option value="United States">United States</option>
        <option value="France">France</option>
    </select>
</div>

styled-select--javascript

(function() {
    if ( 'querySelector' in document && 'addEventListener' in window ) {
        // check query selector is recognised by the browser IE9+
        var value;
        document.querySelector('.js-styled-select__select').onchange = function() {
            value = this.options[this.selectedIndex].value;
            var sibling = this.parentNode.children[0];
            sibling.innerHTML = value;
        };
    }
}());

styled-select--scss

.styled-select {
    position: relative;
    height: 40px;
    &__select,
    &__label {
        // ensure select-box and label to fill the container
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
    }
    &__select {
        background: none;
        opacity: 0;
        width: 100%;
        cursor: pointer;
    }
    &__label {
        // style the select box
        border: 1px solid #45d296;
        border-radius: 3px;
        line-height: 40px;
        padding: 0 10px;
        color: #333;
        background: white;
        &:before {
            // create the triangle
            position: absolute;
            top: 50%;
            right: 10px;
            margin-top: -3px;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid #45d296;
            content: " ";
        }
    }
}