Posted By

eklemen on 03/08/14

Tagged

form
css

Versions (?)

Last Edited at 03/08/14 05:27am

Statistics

Viewed 996 times

Favorited by 0 user(s)

Related snippets

Custom Select Inputs

/ Published in: SASS

SASS to customize the appearance of select inputs

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

// Only style selects for ie10 and good browsers
.gt-ie9 {
 
    // be aware: this class might change from 
    // project to project
    .type_select {
 
        // the span surrounding the select
        span {
            display: inline-block;
            background-position: right center;
 
            //add your image here
            background-image: url( [your dropdown arrow png image] );
        }
 
        select {
 
            // make the select styling go away 
            -webkit-appearance: none;
            -moz-appearance: none;
            -ms-appearance: none;
            -o-appearance: none;
            appearance: none;
 
            // fix for -moz-appearance:none; not always working
            text-indent: 0.01px;
            text-overflow: "";
 
            // fix for ie10
            &::-ms-expand {
                    display: none;
            }
 
        }
    }
 
    .svg .type_select span {
 
        //add your image here
        background-image:url( [your dropdown arrow svg image] );
 
    }
 
}