텍스트 입력 필드에 투명 아이콘을 쉽게 추가하려면 어떻게 해야 합니까?

아이콘을 사용하여 명확한 텍스트 입력 생성

웹 양식에서는 특히 다음과 같은 경우 입력 값을 지우는 직관적인 방법을 제공하는 것이 바람직한 경우가 많습니다. 텍스트 입력 요소. 이를 통해 커서 탐색에 의존하지 않고도 입력을 빠르게 삭제할 수 있어 사용자 경험이 향상될 수 있습니다.

jQuery 기반 솔루션

jQuery는 입력 생성을 용이하게 하는 여러 플러그인을 제공합니다. 명확한 아이콘이 통합된 요소입니다. 이러한 플러그인을 사용하면 입력 필드 내에서 아이콘의 정확한 위치를 지정할 수 있습니다.

사용자 정의 CSS 구현

또는 사용자 정의 CSS를 사용하여 플러그인에 의존하지 않고 명확한 아이콘을 만들 수도 있습니다. 타사 라이브러리.

input[type=search] {
  padding-right: 20px;  /* Adjust as needed */
}

input[type=search]::after {
  content: "×";
  position: absolute;
  right: 5px;  /* Adjust as needed */
  top: 5px;  /* Adjust as needed */
  font-size: 14px;
  color: #ccc;
  cursor: pointer;
}

input[type=search]:focus::after {
  color: #000;
}

"검색" 사용 속성

간단한 해결책은 입력 요소에 type="search" 속성을 추가하는 것입니다. 그러면 최신 브라우저에 자동으로 명확한 아이콘이 표시됩니다. 하지만 이 방법은 Internet Explorer 10 이전 버전에서는 작동하지 않는다는 점에 유의할 필요가 있습니다.

<input type="search">

위 내용은 텍스트 입력 필드에 투명 아이콘을 쉽게 추가하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!