github.com/mithrandie/csvq@v1.18.1/docs/_sass/components/forms/_select.scss (about)

     1  /* Select Field
     2     ========================================================================== */
     3  
     4  select { display: none; }
     5  select.browser-default { display: block; }
     6  
     7  select {
     8    background-color: $select-background;
     9    width: 100%;
    10    padding: $select-padding;
    11    border: $select-border;
    12    border-radius: $select-radius;
    13    height: $input-height;
    14  }
    15  
    16  .select-label {
    17    position: absolute;
    18  }
    19  
    20  .select-wrapper {
    21    position: relative;
    22  
    23    input.select-dropdown {
    24      position: relative;
    25      cursor: pointer;
    26      background-color: transparent;
    27      border: none;
    28      border-bottom: $input-border;
    29      outline: none;
    30      height: $input-height;
    31      line-height: $input-height;
    32      width: 100%;
    33      font-size: $input-font-size;
    34      margin: $input-margin;
    35      padding: 0;
    36      display: block;
    37    }
    38  
    39    span.caret {
    40      color: initial;
    41      position: absolute;
    42      right: 0;
    43      top: 0;
    44      bottom: 0;
    45      height: 10px;
    46      margin: auto 0;
    47      font-size: 10px;
    48      line-height: 10px;
    49  
    50      &.disabled {
    51        color: $input-disabled-color;
    52      }
    53    }
    54  
    55    & + label {
    56      position: absolute;
    57      top: -14px;
    58      font-size: $label-font-size;
    59    }
    60  }
    61  
    62  // Disabled styles
    63  select:disabled {
    64    color: rgba(0,0,0,.3);
    65  }
    66  
    67  .select-wrapper input.select-dropdown:disabled {
    68    color: rgba(0,0,0,.3);
    69    cursor: default;
    70    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    71    -moz-user-select: none; /* mozilla browsers */
    72    -ms-user-select: none; /* IE10+ */
    73    border-bottom: 1px solid rgba(0,0,0,.3);
    74  }
    75  
    76  .select-wrapper i {
    77    color: $select-disabled-color;
    78  }
    79  
    80  .select-dropdown li.disabled,
    81  .select-dropdown li.disabled > span,
    82  .select-dropdown li.optgroup {
    83    color: $select-disabled-color;
    84    background-color: transparent;
    85  }
    86  
    87  // Prefix Icons
    88  .prefix ~ .select-wrapper {
    89    margin-left: 3rem;
    90    width: 92%;
    91    width: calc(100% - 3rem);
    92  }
    93  
    94  .prefix ~ label { margin-left: 3rem; }
    95  
    96  // Icons
    97  .select-dropdown li {
    98    img {
    99      height: $dropdown-item-height - 10;
   100      width: $dropdown-item-height - 10;
   101      margin: 5px 15px;
   102      float: right;
   103    }
   104  }
   105  
   106  // Optgroup styles
   107  .select-dropdown li.optgroup {
   108    border-top: 1px solid $dropdown-hover-bg-color;
   109  
   110    &.selected > span {
   111      color: rgba(0, 0, 0, .7);
   112    }
   113  
   114    & > span {
   115      color: rgba(0, 0, 0, .4);
   116    }
   117  
   118    & ~ li.optgroup-option {
   119      padding-left: 1rem;
   120    }
   121  }