>  기사  >  웹 프론트엔드  >  텍스트 입력 필드 내에 \"검색\" 버튼을 만드는 방법은 무엇입니까?

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

DDD
DDD원래의
2024-11-02 04:59:02622검색

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.