텍스트 입력 필드 내에 \'검색\' 버튼을 만드는 방법은 무엇입니까?

텍스트 입력 필드에 "검색" 버튼 만들기

특정 웹사이트의 소스 코드를 볼 때 "검색" 버튼이 나타날 수 있습니다. " 요소는 텍스트 상자와 "돋보기" 버튼으로 구성됩니다. 이 문서에서는 웹 애플리케이션에서 유사한 요소를 생성하는 과정을 안내합니다.

"돋보기" 이미지 가져오기

"돋보기"를 생성하려면 이미지의 경우 SVG 아이콘이나 작은 PNG 이미지를 사용할 수 있습니다. 무료 또는 상업용 아이콘을 찾을 수 있는 온라인 리소스가 많이 있습니다.

버튼 구현

이미지가 있으면 텍스트 입력에 통합할 수 있습니다. CSS를 사용하는 필드. 예는 다음과 같습니다.

<code class="CSS">#g-search-button {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  left: -22px;
  top: 3px;

  background-color: black;  /* Replace with your own image */
}</code>

이 CSS 코드에서는:

• display: inline-block; 요소를 텍스트가 있는 한 줄에 배치할 수 있습니다.
• 너비와 높이는 버튼의 크기를 지정합니다.
• 위치: 상대; 버튼의 위치를 ​​수동으로 조정할 수 있습니다.
• 왼쪽 및 위쪽 검색 상자의 오른쪽 끝과 겹치는 위치로 버튼을 이동합니다.
• 배경색은 실제 색상으로 대체될 수 있습니다. image.

작업 예제

다음 JSBin은 코드의 작업 예제를 제공합니다: https://jsbin.com/vehobew/edit?html, CSS,출력

위 내용은 텍스트 입력 필드 내에 \'검색\' 버튼을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!