选择仅下载材料设计CSS / JS

Question

我一直在使用Material Design Look创建一些输入字段。 遗憾的是，我无法使用互联网上常用的框架（例如Materialise），所以我需要自己开发它，我几乎创造了所有东西。虽然，没有结果的选择字段下拉列表，我无法做到。 目标是看起来像这个git的{strong>带箭头的简单选择 here

目前我在codepen

上做了什么

您是否知道任何源代码或示例而不是仅使用CSS（scss）和JS

的getmdl-select

＆＃13;

＆＃13;

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

$md-color-blue:#1074ac;
$md-color-black: rgba(0, 0, 0, 0.54);


/* ---- text field ----- */
.md-group{ 
    position:relative; 
    margin: 35px 0;
    // margin-bottom:45px; 
    .md-input__text{
        background: transparent;
        font-size:14px;
        padding:5px 5px 2px 5px;
        // display:block;
        width:50%;
        border:none;
        border-bottom:1px solid #757575;
        vertical-align: bottom;
    }
    .md-input__text:focus { 
        outline:none; 
  }    
  
  option:active,
  option:hover, option:focus, {
      background: rgba(0,0,0,.04);
  }
}

/* LABEL */
.md-input__label {
  color:rgba(0,0,0,.54); 
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:-20px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
  }
  
  /* active state */
  .md-input__text:focus ~ label, .md-input__text:valid ~ label {
    top:-20px;
    font-size:14px;
    color:#5264AE;
  }

  /* BOTTOM BARS */
.md-input__bar 	{ 
    position:relative; 
    display:block; 
    width:50%; 
    background-color: rgba(0,0,0,.42);
}
.md-input__bar:before, .md-input__bar:after 	{
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:$md-color-blue; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.md-input__bar:before {
  left:50%;
}
.md-input__bar:after {
  right:50%; 
}

/* active state */
.md-input__text:focus ~ .md-input__bar:before, .md-input__text:focus ~ .md-input__bar:after {
    width:50%;
}

/* HIGHLIGHTER */
.md-input__highlight {
    position:absolute;
    height:60%; 
    width:100px; 
    top:25%; 
    left:0;
    pointer-events:none;
    opacity:0.5;
  }
  
  /* active state */
  .md-input__text:focus ~ .md-input__highlight {
    -webkit-animation:inputHighlighter 0.3s ease;
    -moz-animation:inputHighlighter 0.3s ease;
    animation:inputHighlighter 0.3s ease;
  }


  /* ANIMATIONS */
@-webkit-keyframes inputHighlighter {
	from { background:$md-color-blue; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:$md-color-blue; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:$md-color-blue; }
  to 	{ width:0; background:transparent; }
}

  .md-btn__right{
    position: absolute; 
    top: 1px; 
    right: 1px;
  }
  .md-autocomplete-clear{
    display: none;
  }
  .md-input__text:focus ~ .md-autocomplete-clear {
    display: block;
  }

＆＃13;

<div class="md-group">
      <select class="md-input__text" required>
            <option>Yes</option>
            <option>No</option>
      </select>
      <span class="md-input__highlight"></span>
      <span class="md-input__bar"></span>
      <label class="md-input__label">Select</label> 
</div>

＆＃13;

＆＃13;

＆＃13;