input type="text"에 text-align:right 적용시 마우스 커서가 사라질때

웹퍼블리싱을 하면서 만나게 되는 UI중에서

테이블(table)내에서 가격 표시라던지 금액을 표시할 때, 우측으로 정렬하는 경우가 있습니다.

엑셀파일에서 이와 유사한 UI를 살펴볼 수 있는데요.

엑셀은 기본적으로 텍스트는 좌측정렬을 숫자는 우측정렬을 합니다.

엑셀이 금전출납부, 회계 용도로 많이 쓰이기 때문에

이러한 UI가 웹에도 옮겨져

텍스트는 좌측으로, 가격은 우측으로 정렬하는 UI가이드를 만날때가 있습니다.

<input type="text' />에 style="text-align:right;"를 입히게 되면

아주 쉽게 텍스트박스에서 금액을 입력할때 입력값이 우측정렬이 됩니다.

하지만 IE에서 마우스 커서(cursor)가 사라지는 현상이 있습니다.

이 문제의 해결방법은

input에 padding-right:1px 을 추가로 선언하는 것입니다.


padding-right값이 0일 경우에 마우스 커서가 input에 가려져 있는 것으로 판단됩니다.


그렇기 때문에 input text에 적절한 padding-right값을 선언하면

숨겨졌던 마우스 커서가 나타납니다.