CSS를 사용하여 레이블로 입력 - 자습서

HTML

HTML의 경우 레이블과 입력이 있는 컨테이너가 필요합니다.

또한 입력에 대한 자리 표시자를 공백("")으로 설정하여 입력에 값이 있을 때 CSS로 감지할 수 있습니다.

<div class="input_container">
        <input type="text" name="name" placeholder=" ">
        <label for="name">Name</label>
</div>

CSS

CSS의 경우 컨테이너의 위치를 ​​상대적으로 설정하고 글꼴을 변경합니다.

.input_container {
    position: relative;
    font-family: BlinkMacSystemFont;
}

이제 레이블의 위치를 ​​절대값으로 설정하고 중앙에 상위 50%에 정렬하고 translateX(-50%)를 변환합니다.

그리고 입력이 레이블 위에 오도록 z-index를 -1로 설정합니다.

그렇지 않으면 마우스가 레이블에 있을 때 입력을 클릭할 수 없습니다.

그런 다음 배경색을 흰색(#fff)으로 설정합니다. 실제로 여기에서는 배경과 동일한 색상을 설정했습니다. 왜냐하면 이 요소는 입력의 위쪽 테두리 위에 놓일 것이기 때문입니다. 테두리가 뒤에 있는 것을 원하지 않습니다.

마지막으로 텍스트 색상을 밝은 회색으로 설정하고 여백과 패딩을 추가합니다.

.input_container label {
    position: absolute;
    margin: 0 5px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
    background-color: #fff;
    padding: 0 2px;
    color: #aaa;
}

입력을 위해 테두리 색상을 레이블의 텍스트 색상에 사용한 것과 동일한 밝은 회색 색상으로 설정합니다.

또한 테두리 반경, 패딩을 추가하고 배경색을 투명으로 설정하여 뒤의 레이블이 보이도록 할 것입니다.

.input_container input {
    border: 1px solid #aaa;
    border-radius: 5px;
    background-color: transparent;
    padding: 5px;
}

그런 다음 초점이 맞춰진 윤곽선만 제거합니다.

.input_container input:focus {
    outline: none;
}

이제 입력에 포커스가 있거나 값이 있을 때 레이블의 스타일을 지정합니다.

"input:not(:placeholder-shown)"을 사용하여 값이 있을 때(자리 표시자가 표시되지 않을 때) 입력을 선택하고 포커스가 있을 때 형제 "+"선택기를 사용하여 레이블을 선택합니다. z-index를 1로 설정하고 top을 0으로 설정하여 입력의 위쪽 테두리 위로 이동합니다.

그리고 글꼴 크기를 줄입니다.

/* Focus or containing value (placeholder not shown) */      .input_container input:focus + label,
.input_container input:not(:placeholder-shown) + label {
    top: 0;
    font-size: 8px;
    z-index: 1;
}

입력에 포커스가 있을 때 레이블의 색상과 입력의 밝은 회색 테두리를 덮어쓰고 녹색으로 설정합니다.

/* Only when focused */
.input_container input:focus + label {
    color: rgb(15, 156, 116);
}
.input_container input:focus {
    border-color: rgb(15, 156, 116);
}

그리고 그게 다야.

코드 및 비디오 자습서here를 찾을 수 있습니다.

읽어 주셔서 감사합니다. ❤️