CSS Flexbox

여러가지 방법이 있겠지만 Flexbox를 이용한 유동적으로 늘어나고 줄어드는 input박스를 구현해봤습니다.
요즘 모바일 코딩시 전화번호 입력폼, 주민등록번호 입력폼등에서 많이 사용하고있습니다.
좋은 방법이 될지 확신은 안서지만 가장 편하더군요.-_-

Demo

인풋 추가 / 인풋 삭제

HTML

[html]
<div class="input-box">
<span><input type="text" /></span>
<span><input type="text" /></span>
<span><input type="text" /></span>
</div>
[/html]

CSS

[css]
.input-box {
width:100%;
display:-moz-box;
display:-webkit-flexbox;
display:-webkit-box;
}
.input-box > span {
display:block;
margin:0 10px;
-moz-box-flex:1;
-webkit-flex:1;
-webkit-box-flex:1;
}
.input-box > span:first-child {
margin-left:0;
}
.input-box > span:last-child {
margin-right:0;
}
.input-box > span:before {
content:’-‘;
line-height:30px;
text-align:center;
display:inline-block;
width:20px;
height:30px;
margin-left:-20px;
}
.input-box > span:first-child:before {
display:none;
}
[/css]

구버전 브라우저에서 지원하지 않지만, display:table;을 이용하면 구현이 가능할듯싶습니다.

3 comments

  1. 황규연

    모바일에서 요긴하게 쓸만한…

    1. Bathory

      이런 누추한곳까지…
      잘 지내시죠? ㅎㅎ

      1. 황규연

        뭐 그럭저럭…ㅋ

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다