Custom Select Inputs


/ Published in: SASS
Save to your folder(s)

SASS to customize the appearance of select inputs


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.