Advanced Search

Custom Select Inputs

/ Published in: SASS
Save to your folder(s)
SASS to customize the appearance of select inputs

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. // Only style selects for ie10 and good browsers
  2. .gt-ie9 {
  3.  
  4.     // be aware: this class might change from 
  5.     // project to project
  6.     .type_select {
  7.  
  8.         // the span surrounding the select
  9.         span {
  10.             display: inline-block;
  11.             background-position: right center;
  12.  
  13.             //add your image here
  14.             background-image: url( [your dropdown arrow png image] );
  15.         }
  16.  
  17.         select {
  18.  
  19.             // make the select styling go away 
  20.             -webkit-appearance: none;
  21.             -moz-appearance: none;
  22.             -ms-appearance: none;
  23.             -o-appearance: none;
  24.             appearance: none;
  25.  
  26.             // fix for -moz-appearance:none; not always working
  27.             text-indent: 0.01px;
  28.             text-overflow: "";
  29.  
  30.             // fix for ie10
  31.             &::-ms-expand {
  32.                     display: none;
  33.             }
  34.  
  35.         }
  36.     }
  37.  
  38.     .svg .type_select span {
  39.  
  40.         //add your image here
  41.         background-image:url( [your dropdown arrow svg image] );
  42.  
  43.     }
  44.  
  45. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.