<div class="box">
  
  <div class="box-select">
    <label for="select">셀렉트 박스1</label>
    <select name="select" id="select">
      <option value="0">셀렉트 박스1</option>
      <option value="1">옵션 1</option>
      <option value="2">옵션 2</option>
      <option value="3">옵션 3</option>
      <optgroup label="옵션 그룹">
        <option value="4">옵션 4</option>
        <option value="5">옵션 5</option>
        <option value="6">옵션 6</option>
      </optgroup>
    </select>
  </div>
  
  <br><br><br> 
  
  <label for="select2">셀렉트 박스2</label>
    <select name="select2" id="select2">
      <option value="0">셀렉트 박스2</option>
      <option value="1">옵션 1</option>
      <option value="2">옵션 2</option>
      <option value="3">옵션 3</option>
      <optgroup label="옵션 그룹">
        <option value="4">옵션 4</option>
        <option value="5">옵션 5</option>
        <option value="6">옵션 6</option>
      </optgroup>
    </select>
  
</div>

html, body{width:100%;height:100%;}
body{color:#000;font-size:12px;font-family:Arial, "맑은 고딕", Malgun Gothic, "돋움", dotum, sans-serif;}

.box{width:100%;height:100%;background:#eee;text-align:center;}

.box-select{display:inline-block;position:relative;margin-top:50px;width:200px;height:50px;border:1px solid #ccc;background:transparent;box-sizing:border-box;}
.box-select:before{content:'';display:block;position:absolute;right:10px;top:0;width:20px;height:100%;background:url(https://goo.gl/zZ7LYG) 0 50% no-repeat;z-index:100;}
.box-select label{display:inline-block;position:absolute;left:0;top:0;padding:0 40px 0 20px;width:100%;height:100%;font-size:12px;line-height:4.167;text-align:left;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;overflow:hidden;box-sizing:border-box;}
.box-select select{position:absolute;left:0;top:0;width:100%;height:100%;border:0;filter:alpha(opacity=0);opacity:0;z-index:100;}

.box-select.focus label{outline:1px solid #1e90ff;}
.box-select.disabled label{color:#ddd;background:#ccc;}

(function($) {
  $.fn.selectBox = function() {
    return this.each(function(){
      var $wrap = $(this);
      var $select = $wrap.find("select");
      var $label = $wrap.find("label");
      var $txt = $select.find("option:selected").text();
      var $disabled = $select.prop("disabled");
      
      if($disabled){
        $wrap.addClass("disabled");
      }
      
      $label.text($txt);
      
      $select.on("change", function(){
        $txt = $(this).find("option:selected").text();
        $label.text($txt);
      });
      
      $select.focusin(function(){
        $wrap.addClass("focus");
      }).focusout(function(){
        $wrap.removeClass("focus");
      });
      
    });
  }
 
})(jQuery);

$(function(){
  $(".box-select").selectBox();
});