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

DDD
풀어 주다: 2024-11-02 04:59:02
원래의
714명이 탐색했습니다.

How to Create a

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

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

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

"돋보기"를 생성하려면 이미지의 경우 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿