Select box with a categories from a custom post type. Used for filtering posts.

category-select.php

 <div class="filter">
                <h5>Sort: </h5>
                <?php
                      $cat_args = array(
                          'taxonomy'     => 'inventory_category',
                          'parent'        => 0,
                          'number'        => 10,
                          'hide_empty'    => true           
                      );
                      $terms = get_terms($cat_args);
                      $count = count($terms);
                      echo '<div class="select">';
                      echo '<span class="arr"></span>';
                      echo '<select class="filters-select">';
                      echo '<option value="*">'. __( "Show All", "mvpwp" ) .'</option>';
                          if ( $count > 0 )
                          {   
                              foreach ( $terms as $term ) {
                                  $termname = strtolower($term->name);
                                  $termname = str_replace(' ', '-', $termname);
                                  echo '<option value=".'.$termname.'">'.$term->name.'</option>';
                              }
                          }
                      echo '</select>';
                      echo '</div>';
                  
                ?>
              </div> <!-- filter -->

isotope-select.js

// bind filter on select change
  $('.filters-select').on( 'change', function() {
    // get filter value from option value
    var filterValue = this.value;
    $grid.isotope({ filter: filterValue });
  });

select-styles.scss

    .filter {
      float: left;

      .select {
         font-size: 16px;
          position: relative;
          display: inline-block;

          select {
            outline: none;
            -webkit-appearance: none;
            -moz-appearance:none;
            display: block;
            padding: 10px 60px 10px 10px;
            margin: 0;
            transition: border-color 0.2s;
            border: 2px solid #ddd;
            border-radius: 5px;
            background: #fff;
            color: #555;
            line-height: normal;
          }

          .arr {
            background: #fff;
            bottom: 2px;
            position: absolute;
            right: 2px;
            top: 2px;
            width: 30px;
            border-radius: 2px;
            pointer-events: none;

            &:before {
              content: '';
              position: absolute;
              top: 50%;
              right: 10px;
              margin-top: -5px;
              pointer-events: none;
              border-top: 10px solid #444;
              border-left: 10px solid transparent;
              border-right: 10px solid transparent;
            }

            &:after {
              content: '';
              position: absolute;
              top: 50%;
              right: 14px;
              margin-top: -5px;
              pointer-events: none;
              border-top: 6px solid #fff;
              border-left: 6px solid transparent;
              border-right: 6px solid transparent;
            }
          }
      }

      h5 {
        display: inline-block;
        margin-right: 8px;
      }
    }