Advertisement
englishextra

custom-dropdown.css

Mar 15th, 2014
256
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 1.07 KB | None | 0 0
  1. /*!
  2.  * gist.github.com/englishextra/9348598
  3.  * pastebin.com/i4w9B7zX
  4.  */
  5. .custom-dropdown {
  6.     display: inline-block;
  7.     width: 280px;
  8.     position: relative;
  9.     vertical-align: middle;
  10.     margin: 0;
  11. }
  12. .custom-dropdown select {
  13.     font-size: 1em;
  14.     text-indent: 0.01px;
  15.     text-overflow: '';
  16.     color: #FFF;
  17.     background-color: rgba(80, 111, 124, 1);
  18.     border: 0;
  19.     padding: .5em;
  20.     margin: 0;
  21.     -webkit-appearance: button;
  22. }
  23. .custom-dropdown::before,
  24. .custom-dropdown::after {
  25.     content: "";
  26.     position: absolute;
  27.     pointer-events: none;
  28. }
  29. .custom-dropdown::after {
  30.     height: 1em;
  31.     font-size: .625em;
  32.     line-height: 1;
  33.     right: 1.2em;
  34.     top: 50%;
  35.     content: "\25BC";
  36.     margin-top: -.5em;
  37. }
  38. .custom-dropdown::before {
  39.     width: 2em;
  40.     right: 0;
  41.     top: 0;
  42.     bottom: 0;
  43. }
  44. .custom-dropdown select[disabled],
  45. .custom-dropdown select[disabled]::after {
  46.     color: #FFF;
  47.     opacity: .375;
  48. }
  49. .custom-dropdown::before {
  50.     background-color: rgba(0,0,0,.0375);
  51. }
  52. .custom-dropdown::after {
  53.     color: #FFF;
  54. }
  55. @media (min-width: 1px) and (max-width: 320px) {
  56.     .custom-dropdown {
  57.         width: 100%;
  58.     }
  59. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement