CSS를 사용하여 입력 필드 안에 아이콘을 어떻게 삽입할 수 있나요?

입력 요소 내에 아이콘 배치

양식의 입력 필드에 아이콘을 삽입하면 미적 측면과 유용성이 향상됩니다. 이를 달성하기 위해 참조 사이트에서 사용하는 기술을 조사해 보겠습니다.

배경 이미지 및 패딩

이 접근 방식은 CSS를 활용하여 브라우저를 속여 아이콘을 표시하도록 합니다. background-image 및 background-position과 같은 속성을 사용하여 배경 이미지를 입력 요소에 통합합니다.

동시에 코드는 입력의 왼쪽 패딩 값을 수정하여 커서 위치를 이동하여 겹치지 않도록 합니다. 아이콘으로. 따라서 사용자 입력을 위한 공간을 남겨두고 입력 필드 내에 아이콘이 나타납니다.

예제 코드:

앞서 언급한 사이트는 이 효과를 달성하기 위해 다음 CSS 규칙을 구현합니다.

background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;

이 예에서는 comment-author.gif라는 배경 이미지가 아이콘으로 사용되며 왼쪽과 위쪽에서 7픽셀 떨어진 곳에 위치합니다. 입력 요소의 30픽셀의 왼쪽 패딩 값은 커서를 오른쪽으로 밀어 텍스트 입력을 위한 충분한 공간을 제공합니다.

이러한 CSS 트릭을 결합하면 아이콘을 입력 요소에 원활하게 통합하여 시각적 매력을 향상하고 양식의 사용자 경험

위 내용은 CSS를 사용하여 입력 필드 안에 아이콘을 어떻게 삽입할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!