Welcome to Snipped, a code gallery for creating, saving and sharing all kinds of code snippets.

Custom Select Inputs

SASS · February 16, 2017 6:33 pm

0 0 106

SASS to customize the appearance of select inputs.

// 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] );

}

}

Discuss this Snip
    No Discussion Comments found.

    You must be Signed In to discuss this Snip
Snipped

Snipped

Joined on
February 16, 2017

  • 9 Snips
    Contributed
  • 0 Likes
    Given
  • 0 Comments Posted
Snip Tags
Get Social And Share

Manage and share all of your code snippets in one easy place.