커스텀 selectbox

See the Pen custom selectbox by publisher.kim (@publisherkim) on CodePen.

 

 

 

html

<div class="selectbox">
   <a href="#" class="selected">111</a>
    <ul class="selectoptions">
        <li class="option default"><a href="#">111</a></li>
        <li class="option"><a href="#">222</a></li>
       <li class="option"><a href="#">333</a></li>
    </ul>
</div>

 

css

li{list-style:none;}
a{color:#000; text-decoration:none;}

div.selectbox { padding: 0; position: relative; text-align: left; width:200px;}
div.selectbox .selected { display: block; width: 100%; height: 100%; padding: 0 15px; box-sizing:border-box; background: #fff; border:1px solid #d9d9d9; height:30px; line-height:28px;}
div.selectbox .selected::after{content:''; display:block; width:10px; height:10px; background:url(https://umings.github.io/images/i_select_arrow2.png) no-repeat center / 10px; position:absolute; right:15px; top:10px; transition:all 0.2s;}
div.selectbox .selected.on::after{transform:rotate(180deg);}
div.selectbox .selectoptions { width: 100%; background: #fff; border: 1px solid #d9d9d9; position: absolute; left:0; z-index: 99; display: none; border-top: 0; top: 30px; padding:0; margin:0; box-sizing:border-box;}
div.selectbox .selectoptions li a { display: block; width: 100%; height: 100%; padding: 5px 15px; font-weight:inherit; box-sizing:border-box;}
div.selectbox .selectoptions li a:hover { background: #f2f2f2; }

 

javascript  *jquery 필요

// custom selectbox
$(document).ready(function() {
  $(".selectbox").each(function() {
    var $this = $(this);
    var firstVal = $this.find(".option.default").text();
    $this.find(".selected").text(firstVal);
    // Show/hide drop down
    $this.find(".selected").click(function() {
      $(".selectoptions").slideUp(100);
      if (!$this.find(".selectoptions").is(":visible")) {
        $this.find(".selectoptions").slideDown(100);
        $(".selected").removeClass("on")
        $(this).addClass("on")
      } else {
        $this.find(".selectoptions").slideUp(100);
        $(this).removeClass("on")
      }
      return false;
    })
    // Set selected value
    $this.find(".option").click(function() {
      val = $(this).text();
      $this.find(".selected").text(val);
      $(".selectoptions").slideUp(100);
      $(".selectbox .selected").removeClass("on")
      return false;
    })
  })
});