<xmp></xmp>

.cont_wrap {display:flex; display:-webkit-flex; display:-webkit-box; display:-ms-flexbox;}
.cont_wrap .input {display:block; flex:1; -webkit-flex:1; -webkit-box-flex:1; -ms-flex:1;}
.cont_wrap .txt {width:50px;}
.cont_wrap .btn {}
.cont_wrap .tel {display:block; flex:1; -webkit-flex:1; -webkit-box-flex:1; -ms-flex:1;}
.cont_wrap .dash {width:10px;}

<div class="cont_wrap">
    <span class="input"><input type="text"></span>
    <span class="txt">원</span>
    <a href="#" class="btn">쿠폰적용</a>
</div>

<div class="cont_wrap">
    <input type="text" class="tel">
    <span class="dash">-</span>
    <input type="text" class="tel">
    <span class="dash">-</span><
    <input type="text" class="tel">
</div>

화면 사이즈에 따라 input 유동적으로 사이즈 변경된다.

ie 11 이상부터 지원되며,

webkit 추가 해야함.

익스에서 사용시 -ms- 추가하면 ie 10부터 적용됨.

* flex:1 넣은 요소에 display:block; 을 꼭 넣어줘야함.(안드로이드 하위버전을 위해...(화웨이))

select {
  -webkit-appearance: none;  /* 네이티브 외형 감추기 */
  -moz-appearance: none;
  appearance: none;
  background: url(이미지 경로) no-repeat 95% 50%;  /* 화살표 모양의 이미지 */ 
}

/* IE 10, 11의 네이티브 화살표 숨기기 */
select::-ms-expand { 
  display: none;
}