-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

transform: rotate(45deg);

width: 9px;

height: 9px;

margin-top: -6px;

border-top: 2px solid #bebebe;

border-right: 2px solid #bebebe;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

transform: rotate(45deg);

.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;
}

<div class="btntype">
	<a href="#" class="area" onclick="return false;">취소</a>
	<var class="bar"></var>
	<a href="#" class="area" onclick="return false;">확인</a>
</div>

.btntype {display: table;}
.btntype .area {display: table-cell; width:50%;}
.btntype .bar {display:block; width:4px;}

<div class="pdOpt">
	<span class="item">
		<span class="label"><span>브라운 라쿤 트리밍 퀄티드 롱</span></span>
		<span class="color"></span>
		<span class="size">FREE</span>
	</span>
	<span class="item">
		<span class="label"><span>상의</span></span>
		<span class="color"></span>
		<span class="size">45F</span>
	</span>
</div>

.pdOpt {display:table; width:auto; margin-top:8px;}
.pdOpt .item {display:table-row;}
.pdOpt .item > span {display: table-cell;}

.text {
    width:100px; /* %도 가능함 */
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.text {
      display: -webkit-box;
      display: -ms-flexbox;
      display: box;
      margin-top:1px;
      max-height:80px;
      overflow:hidden;
      vertical-align:top;
      text-overflow: ellipsis;
      word-break:break-all;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:3
  }