Remove Border Radius Styling and Add Down Arrow Caret Icon To Product Variant Dropdown Selector

When to Use

Use this tecnique when clients want to overwrite the default browser dropdown styling. By defaulf removing the browser stying also removes the down arrow, so this code shows how to add a custom arrow.

This technique was first used ont he Nitromall store: https://nitromall.myshopify.com/collections/mens-apparel/products/dsabmt0004-2016-antron-brown-3x-champion-t-shirt

Example on Codepen

http://codepen.io/rianneildesigns/pen/RKXQbJ

The Code

This is basically the code the OLM theme uses for the variant dropdown selector. It's not necessary to add this code, just here as a reference.

<div class="selector-wrapper form-group">

<select class="single-option-selector form-control input-lg" data-option="option1" id="product-select-option-0"><option value="">Size</option><option value="SMALL">SMALL</option><option value="MEDIUM">MEDIUM</option><option value="LARGE">LARGE</option><option value="X-LARGE">X-LARGE</option><option value="XX-LARGE">XX-LARGE</option><option value="3X-LARGE">3X-LARGE</option><option value="4X-LARGE">4X-LARGE</option></select></div>

custom.scss.liquid

Open custom.scss.liquid and add the following code. This will remove all browser dropdown styling and add a down arrow caret.

.product-variants .selector-wrapper.form-group {
    width: 150px;
}
.product-variants .selector-wrapper {
    position: relative;
    display: inline-block;
}
.product-variants .selector-wrapper select {
    display: inline-block;
    border: 1px solid #bbb;
    padding: 4px 3px 3px 5px;

    font: inherit;
    outline:none; /* remove focus ring from Webkit */
    line-height: 1.2;
    background: #f8f8f8;

    -webkit-appearance:none; /* remove the strong OSX influence from Webkit */

    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
/* for Webkit's CSS-only solution */
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    .product-variants .selector-wrapper select {
        padding-right:30px;    
    }
}
/* Since we removed the default focus styles, we have to add our own */
.product-variants .selector-wrapper select:focus {
    -webkit-box-shadow: 0 0 3px 1px #c00;
    -moz-box-shadow: 0 0 3px 1px #c00;
    box-shadow: 0 0 3px 1px #c00;
}
/* Select arrow styling */
.product-variants .selector-wrapper.form-group:after {
    content: "\25bc";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    font-size: 70%;
    line-height: 45px;
    padding: 0 7px;
    background: #f8f8f8;
    color: black;
    border-top:1px solid #bbb;
    border-right:1px solid #bbb;
    border-bottom:1px solid #bbb;
    pointer-events:none;

    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.no-pointer-events select:after {
    content: none;
}