텍스트 입력 필드 안에 검색 버튼을 만드는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

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

Linda Hamilton

풀어 주다： 2024-11-01 08:03:02

원래의

991명이 탐색했습니다.

How to Create a Search Button Inside a Text Input Field?

텍스트 입력 필드에 검색 버튼을 구현하는 방법

많은 웹사이트에서 발견되는 검색 요소를 모방하려면 텍스트를 결합할 수 있습니다. 범위 태그가 있는 입력 필드.

검색 버튼 추가

검색 버튼을 범위 태그 내에 포함:

<code class="html"><span id="g-search-button"><img src="magnifying-glass.png" alt="Search"></span></code>

로그인 후 복사

버튼 스타일링

버튼을 텍스트 입력 왼쪽에 배치하려면 사용자 정의 스타일을 적용하세요.

<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 image URL */
}</code>

로그인 후 복사

돋보기 이미지 가져오기

IconFinder나 The Noun Project와 같은 웹사이트에서 무료로 돋보기 이미지를 찾을 수 있습니다.

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