CSS only fix for select with rounded corners on OSX

readme

On OSX in chrome its really tough to get rid of the rounded corners on a select without removing the arrow.

Here's a way to get rid of them and add an arrow back in using CSS only.
I found this fix on JS fiddle (after a couple hours of scouring the internet), I'm putting it here so that I can't lose it, hope you find it helpful.

ifYouPreferSass

.select-list {
    position: relative;

    &:after{
        content: "▼";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        font-size: 60%;
        line-height: 30px;
        color: #555;
        pointer-events:none;
        padding:2px 25px;
    }
}

.select-list select {
    outline:none; /* remove focus ring from Webkit */
    line-height: 1.2;
    -webkit-appearance:none; /* remove the strong OSX influence from Webkit */
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 0px;

    &:focus {
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
        -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    }
}

index

<div class="select-list">
    <select>
        <option selected="selected">Select One</option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</div>

styles

.select-list {
    position: relative;
}
.select-list select {
    border: none;
    padding: 4px 20px 3px 5px;
    margin: 0;
    font: inherit;
    outline:none; /* remove focus ring from Webkit */
    line-height: 1.2;
    background: #fff;
    -webkit-appearance:none; /* remove the strong OSX influence from Webkit */
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 0px;
}

/* Since we removed the default focus styles, we have to add our own */
.select-list select:focus {
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

/* Select arrow styling */
.select-list:after {
    content: "▼";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    font-size: 60%;
    line-height: 30px;
    color: #555;
    pointer-events:none;
    padding:2px 25px;
}