select

                              
.select{display: inline-block; height: 30px; border: 1px solid #ddd; padding: 0 5px; box-sizing: border-box;
font-family: 'Noto Sans'; border-radius: 2px; color: #222; vertical-align: middle;background-color: #fff;}
         
label{color: #000; font-family: "Noto Sans";}

.selContainer{display: flex;
  label{display: flex;align-items: center; margin-right: 7px;}
}

.customSelect{display: flex; flex: 1;
  >ul{flex: 1;
    >li{flex: 1; position: relative; border: 1px solid #ddd;
    width: 210px; height: 30px; text-indent: 5px; box-sizing: border-box; background: url("../images/ico/ico-select-down.svg")no-repeat center right 10px;
      span{flex: 0.975; display: block; line-height: 28px; color: #222; font-family: 'Noto Sans'; cursor: pointer;}
      .selList{display: none; position: absolute; top: 29px; left: -1px; width: 100%; z-index: 200; 
      border: 1px solid #ddd; border-top: 0; border-radius: 0 0 4px 4px; background-color: #fff;
        li{
          &:hover{background-color: #3399ff;
            span{color: #fff;}
          }
        }
      }
    }
  }
  &.active{
    ul li .selList{display: block;}
  }
  +.customSelect{margin-left: 10px;}
}
  
                            

                              
label {
  color: #000;
  font-family: "Noto Sans";
}                           
.selContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.selContainer label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 7px;
}

.customSelect {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.customSelect > ul {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.customSelect > ul > li {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
      display: -ms-flexbox;
              display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 30px;
  position: relative;
  border: 1px solid #ddd;
  text-indent: 5px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.customSelect > ul > li span {
  flex: 0.975;
  display: block;
  line-height: 28px;
  color: #222;
  font-family: 'Noto Sans';
  cursor: pointer;
}

.customSelect > ul > li .selList {
  display: none;
  position: absolute;
  top: 29px;
  left: -1px;
  width: 100%;
  z-index: 200;
  border: 1px solid #ddd;
  border-top: 0;
  border-radius: 0 0 4px 4px;
  background-color: #fff;
}

.customSelect > ul > li .selList li:hover {
  background-color: #3399ff;
}

.customSelect > ul > li .selList li:hover span {
  color: #fff;
}

.customSelect.active ul li .selList {
  display: block;
}

.customSelect + .customSelect {
  margin-left: 10px;
}
                              
                            

                              
$(function(){
  $('.customSelect').on({
    "click":function(){
      $(this).toggleClass('active').siblings('.customSelect').removeClass('active');
    }
  });

  $(document).on({"click":function(e){
    if($('.customSelect').has(e.target).length == 0){
      $('.customSelect').removeClass('active');
    }
  }
  });

  $('.customSelect > ul > li > .selList > li').on({
    "click":function(){
      $(this).parents('ul').prev('span').text($(this).text());
    }
  });
});