Input 추가 요소

CSS에서 input의 크기가 조절되는 방식 때문에, input의 앞이나 뒤에 다른 추가 요소(Add-on)를 더하고 input이 유연하게 빈 공간을 채우도록 동작하게 만드는 것은 거의 불가능했습니다.

이를 해결하기 위해 존재하는 방법이란 input의 너비를 정확하게 알고 있거나, 그 자체로 많은 문제를 안고 있는 display:table-cell 같은 것을 사용하는 방법 뿐입니다. 그중에서 특히 특정 브라우저에서는 추가 요소 내부에 어떤 것을 절대적으로 위치시키는 것이 매우 어렵습니다.

Flexbox를 사용하면, 이런 문제들은 모두 사라지고 코드도 간단해집니다. 게다가, 자동으로 input 필드와 추가 요소의 높이도 같아집니다.

양 쪽의 추가요소

HTML

<!-- 앞 쪽에 추가 -->
<div class="InputAddOn">
  <input class="InputAddOn-field">
  <button class="InputAddOn-item">…</button>
</div>

<!-- 뒤 쪽에 추가 -->
<div class="InputAddOn">
  <span class="InputAddOn-item">…</span>
  <input class="InputAddOn-field">
</div>

<!-- 양 쪽에 추가 -->
<div class="InputAddOn">
  <span class="InputAddOn-item">…</span>
  <input class="InputAddOn-field">
  <button class="InputAddOn-item">…</button>
</div>

CSS

.InputAddOn {
  display: flex;
}

.InputAddOn-field {
  flex: 1;
  /* field styles */
}

.InputAddOn-item {
  /* item styles */
}

이 데모에서 Input 추가요소를 위해 쓰인 전체 소스 코드는 GitHub에서 보실 수 있습니다.