HTML/CSS가 있는 부동 입력 자리 표시자

다음은 입력이 포커스를 받을 때 자리 표시자를 "레이블"로 만드는 멋진 방법입니다.

다음은 최종 결과가 포함된 펜입니다.



먼저 HTML에서 label 뒤에 input를 넣어야 합니다.

<form action="">
  <input type="text" id="fullName" name="fullName">
  <label for="fullName">Full Name</label>
</form>

이렇게 하면 CSS로 label를 타겟팅할 수 있습니다.

그런 다음 HTML에서 직접 input a placeholder를 제공하는 대신 label를 자리 표시자로 사용합니다. label가 input 안에 있도록 하려면 transform: translate()를 사용할 수 있습니다. 또한 더 밝은 색상을 사용하여 기본 자리 표시자처럼 보이게 할 수도 있습니다.

다음은 초기 상태에 대한 관련 CSS입니다(번역에 사용되는 값은 글꼴 크기, 위치 등에 따라 달라질 수 있음).

    label {
      color: #999;
      transform: translate(0.25rem, -1.5rem);
      transition: all 0.2s ease-out;
    }

이제 input에 초점이 맞춰졌을 때 텍스트 위에 배치하려면 다음을 사용하십시오.

    input:focus + label {
      color: #111;
      transform: translate(0, -2.75rem);
    }

효과가있다!

하지만 여전히 문제가 있습니다. 스타일은 label에 초점이 맞춰진 경우에만 input에 적용됩니다. 즉, input에 무언가를 입력한 다음 다른 곳에 초점을 맞추면 label가 원래 위치로 돌아갑니다.

이 문제를 해결하려면 :placeholder-shown 선택기를 사용해야 합니다. 이 선택기를 사용하면 input 의 placeholder 가 표시될 때마다 요소의 스타일을 지정할 수 있습니다. 우리의 경우 label가 표시되지 않을 때 실제로 placeholder의 스타일을 지정하고 싶으므로 :not() 선택기도 사용해야 합니다. 마지막으로 이것이 작동하려면 input에 자리 표시자가 있어야 합니다. label를 placeholder 텍스트로 사용하고 싶기 때문에 빈 공간을 placeholder 값으로 쓸 수 있습니다(빈 문자열""은 작동하지 않음).

<form action="">
  <input type="text" id="fullName" name="fullName" placeholder=" ">
  <label for="fullName">Full Name</label>
</form>

    input:focus + label,
    input:not(:placeholder-shown) + label  {
      color: #111;
      transform: translate(0, -2.75rem);
    }

이제 모든 것이 우리가 원하는 대로 작동합니다.
:placeholder-shown 선택기는 비교적 새롭지만 브라우저 지원은 꽤 좋습니다. 인식하지 못하는 유일한 브라우저는 Edge입니다. 이를 해결하기 위해 @supports 쿼리 해킹을 사용하여 코드가 Edge에서 실행되는지 확인할 수 있습니다(http://browserhacks.com/에서 이와 같은 해킹을 더 찾을 수 있음).

일반적으로 이 해킹은 Edge에서만 지원되는 코드를 작성하는 데 사용됩니다. 우리는 그 반대를 원하기 때문에 쿼리 조건 앞에 not를 추가할 수 있습니다.

또한 다른 무엇보다 먼저 최종 위치를 label에 적용해야 합니다. 이렇게 하면 Edge 브라우저는 일반 형식과 같이 입력 위에 레이블을 표시하고 다른 브라우저는 '자리 표시자' 스타일을 적용합니다.

label {
  display: block;
  transform: translate(0, -2.75rem);
}

@supports (not (-ms-ime-align:auto)) {
    label {
      color: #999;
      transform: translate(0.25rem, -1.5rem);
      transition: all 0.2s ease-out;
    }

    input:focus + label,
    input:not(:placeholder-shown) + label {
      color: #111;
      transform: translate(0, -2.75rem);
    }
}

이 멋진 양식 스타일의 또 다른 가능성은 사용자가 무언가를 입력할 때만 label를 이동하는 것입니다. 이를 위해 input:focus + label 선택기를 간단히 제거할 수 있습니다. 결과는 다음과 같습니다.



도움이 되셨기를 바랍니다! 댓글로 알려주세요.