selecput

select + input = selecput

HTML

<div class="ddd">
  <select name="aaa" id="bbb" class="aaaaa">
    <option value="aaac">man</option>
    <option value="aaaasdadasdhghhh55555" selected>woman</option>
    <option value="aaaasdadasdhghhh55555" data-placeholder="sex"></option>
  </select>
</div>
<div class="ddd" style="margin-top: 50px;">
  <select name="aaa" id="bbb2222" class="aaaaa">
    <option value="adwdwdwadawdaqw" data-placeholder="age" selected></option>
    <option value="aaa1" data-placeholder="city" >seoul</option>
    <option value="aaa3">입력하기 싫어</option>
  </select>
</div>
<div id="dsaw" style="margin-top: 50px;">
  <select name="aaa" id="aaaaaaaabbb">
    <option value="">선택</option>
    <option value="5">하기</option>
    <option value="aaa545655555555555555" selected>싫다</option>
  </select>
</div>

SCSS

@charset "utf-8";
$focusWidth: 1px;
$focusColor: #3e3e3e;
$inputTextColor: #000;
$optionTextColor: #000;
$exActiveBgColor: #dfdfdf;
$wrapBorderWidth: 1px;
$wrapBorderColor: black;
$optionBorderWidth: 1px;
$optionBorderColor: gray;
$paddingHorizon: 10px;
$paddingVertical: 5px;
$fontSize: 13px;
$allowSize: 5px;

$z-index: (
    normalWrap: 1, // 전체 웹
    activeWrap: 2, // 활성화 되었을 때 // 다른 드롭매뉴와 겹침 방지
    //
    frontDecoration: 3, // input의 포커스 시 생기는 아웃라인
    front: 4,  // input
    option: 2, // 드롭된 매뉴
    dim: 1
);

@function z-index($key) {
    @return map-get($z-index, $key);
}

.selecput {
    z-index: z-index(normalWrap);
    position: relative;
    font-size: $fontSize;

    .i {
        &:before {
            z-index: z-index(frontDecoration);
            position: absolute;
            top: 0;
            left: 0;
            display: none;
            width: 100%;
            height: 100%;
            outline: $focusWidth solid $focusColor;
            content: "";
        }

        &:after {
            z-index: z-index(front);
            position: absolute;
            top: 0;
            right: $allowSize * 2;
            bottom: 0;
            width: $allowSize;
            height: $allowSize;
            margin: auto;
            border: 1px solid $wrapBorderColor;
            border-top: 0;
            border-left: 0;
            transform: rotate(45deg);
            transition: transform .4s;
            content: "";
        }
    }

    /* .dim {
        z-index: z-index(dim);
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: none;
        opacity: .3;
        background: #fff;
    } */

    .input {
        z-index: z-index(front);
        position: relative;
        display: block;
        overflow: hidden;
        width: 100%;
        padding: $paddingVertical #{$paddingHorizon + $allowSize * 2} $paddingVertical $paddingHorizon;
        font: inherit;
        color:...

JavaScript

/*
  selecput v0.1.1
  http:/github.com/uiwwnw/selecput/
  copyright uiwwnw
*/
var selecput = function(el, opt) {
  this.hasClass = function(e, name) {
    var classs = e.getAttribute('class');
    if (classs === null || classs === undefined || classs === ' ') {
      return false;
    }
    if (classs.indexOf(name) === -1) {
      return false;
    } else {
      return true;
    }
  };
  this.addClass = function(e, name) {
    var classs = e.getAttribute('class');
    // console.log(typeof classs);
    if (classs === null || classs === undefined || classs === ' ') {
      e.setAttribute('class', name);
      return false;
    }
    if (classs.indexOf(name) === -1) {
      e.setAttribute('class', classs + ' ' + name);
    }
  };
  this.removeClass = function(e, name) {
    var classs = e.getAttribute('class');
    if (classs === null) {
      return false;
    }
    if (classs.indexOf(name) !== -1) {
      classs = classs.substr(0, classs.indexOf(name) - 1);
      e.setAttribute('class', classs);
    }
  };
  this.toggleClass = function(e, name) {
    var classs = e.getAttribute('class');
    if (classs === null) {
      e.setAttribute('class', name);
      return false;
    }
    if (classs.indexOf(name) === -1) {
      e.setAttribute('class', classs + ' ' + name);
    } else {
      classs = classs.substr(0, classs.indexOf(name) - 1);
      e.setAttribute('class', classs);
    }
  };
  this.repeat = function(fn, i) {
    var num = 0;
    var repeat = function() {
      if (i > 0) {
        i -= 1;
        fn(num);
        num += 1;
        repeat(fn, i);
      } else {
        return false;
      }
    };
    repeat(fn, i);
  };
  this.makeDom = function(i) {
    _this.addClass(ctr.el[i], 'selecput');
    ctr.selecput[i].el = document.createElement('div');
    (ctr.selecput[i].class !== null) && (ctr.selecput[i].el.setAttribute('class', ctr.selecput[i].class));
    (ctr.selecput[i].id !== null) && (ctr.selecput[i].el.setAttribute('id', ctr.selecput[i].id));
  ...