입력 필드를 분할된 입력으로 스타일 지정

일련의 분할된 입력 필드를 생성하는 방법에는 여러 가지가 있습니다. 한 가지 방법은 "문자 간격"을 활용하여 단일 입력 필드 내에서 문자를 구분하는 것입니다. 또한 "배경 이미지" 및 "테두리 하단" 스타일은 여러 입력 필드의 환상을 더욱 강화할 수 있습니다.

CSS 스니펫

다음 CSS 코드는 방법을 보여줍니다. 원하는 효과를 만들려면:

#partitioned {
  padding-left: 15px;
  letter-spacing: 42px;
  border: 0;
  background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 50px 1px;
  background-repeat: repeat-x;
  background-position-x: 35px;
  width: 220px;
  outline: none;
}

HTML 구현

이 CSS를 사용하려면 페이지에 다음 HTML 코드를 추가하기만 하면 됩니다.