[CSS] select box css style

custom select box를 구현

구현된 내용 : http://easytwitter.co.kr

CSS

.content-main{
  #sort-section{
    margin-right:20px;
    margin: 13px 0 0 200px;
    div.selectOptions {
      position:absolute;
      top:28px;
      left:0;
      width:198px;
      border:1px solid #ccc;
      border-bottom-right-radius:5px;
      border-bottom-left-radius:5px;
      overflow:hidden;
      background:#f6f6f6;
      padding-top:2px;
      display:none;
      z-index:9999;
    }
    span.selectOption {
      display:block;
      width:80%;
      line-height:20px;
      padding:5px 10%;
    }
    span.selectOption:hover {
      color:#f6f6f6;
      background:#4096ee;
    }
  }
  .selectBox{
    position:relative;
    display:inline-block;
    cursor:default;//마우스 오버될 때 커서 모양을 지정
    text-align:left;
    line-height:30px;
    clear:both;//float을 제거
    color:#888;
  }
  .selected{
    width:167px;
    text-indent:20px;
    border:1px solid #ccc;
    border-right:none;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
    background:#f6f6f6;
    overflow:hidden;
  }
  span.selectArrow{
    width:30px;
    border:1px solid #60abf8;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
    text-align:center;
    font-size:20px;

    //사용자는 어떤 content도 선택할 수 없다. 
    -webkit-user-select:none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    background:#60abf8;
  }
  span.selectArrow,span.selected {
    position:relative;
    float:left;
    height:30px;
    z-index:1;
    color:#333;
  }
}

JQUERY

(enableSelectBoxes = ->
      $("div.selectBox").each ->
        $(this).children("span.selected").html $(this).children("div.selectOptions").children("span.selectOption:first").html()
        $(this).attr "value", $(this).children("div.selectOptions").children("span.selectOption:first").attr("value")
        $(this).children("span.selected,span.selectArrow").click ->
          if $(this).parent().children("div.selectOptions").css("display") is "none"
            $(this).parent().children("div.selectOptions").css "display", "block"
          else
            $(this).parent().children("div.selectOptions").css "display", "none"
          return
        $(this).find("span.selectOption").click ->
          $(this).parent().css "display", "none"
          $(this).closest("div.selectBox").attr "value", $(this).attr("value")
          $(this).parent().siblings("span.selected").html $(this).html()
          $(".content-main .content-header .header-inner").removeAttr("style")
          return
        return
      return
    )()