by yebeen -

display:flex

.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 class="btn" href="#">쿠폰적용</a>
</div>
&nbsp;
<div class="cont_wrap">
     <input class="tel" type="text" />
     <span class="dash">-</span>
     <input class="tel" type="text" />
     <span class="dash">-</span>&lt;
     <input class="tel" type="text" />
</div>

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

ie 11 이상부터 지원되며,
webkit 추가 해야함.
익스에서 사용시 -ms- 추가하면 ie 10부터 적용됨.

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

by yebeen -

ie7에서 button tag 버그!

button 태그를 쓸 경우 ie7에서 width값이 안에 있는 객체 사이즈를 무시하고 padding이 들어간 것 처럼 나온다
그럴 때 써줘야하는 CSS 속성이 바로!

width:auto; overflow:visible;

파이어폭스에서도 ie7 과 동일한 형태로 출력되는데 아래 CSS를 넣어준다.

button::-moz-focus-inner {padding:0; border:0;}
by yebeen -

input tag box-shadow in ios

프로젝트 진행하다가, input 태그에 border를 추가했는데.
Ios에서만 shadow가 적용이 되어 있더라구요!
구글링을 해보니까 Ios에서 있는 버그라고 하더라구요~

당연히 해결방법도 찾았어요!
아래를 참고하세요:)

<style>
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
</style>