Input 입력 시 움직임 제거

html의 input 태그 입력 시 입력창 움직임을 없애는 방법들. 원인 폰트 언어마다 baseline이 틀림.

vertical-align

vertical-align 설정.

4
5
6
.myinput {
  vertical-align: middle;
}

height, line-height

height, line-height 설정.

4
5
6
7
.myinput {
  height: 14px;
  line-height: 14px;
}

wrapper

별도의 div wrapper 추가.

4
5
6
<div class="myinputwrapper">
  <input type="text" class="myinput" />
</div>

 4
 5
 6
 7
 8
 9
10
11
12
13
.myinputwrapper {
  border: 1px solid #666;
  height: 14px;
  overflow: hidden;
}

.myinput {
  border: none;
  margin:10px 0 0 0;
}

그게 다야. 축하해! 👏