돋보기 아이콘이 있는 사용자 정의 \"검색\" 버튼을 만드는 방법은 무엇입니까?

사용자 정의 "검색" 버튼으로 텍스트 입력 필드 장식

특정 웹사이트에서 볼 수 있는 것과 유사한 검색 요소를 만들려면 다음을 따르세요. 다음 단계:

기본 구조 만들기:

1. 텍스트 입력 필드 코딩:

<code class="html"><input type="text" name="q" id="site-search-input" autocomplete="off" value="Search" class="gray" /></code>

2. 돋보기 이미지를 담는 태그:

<code class="html"><span id="g-search-button"></span></code>

돋보기 이미지 추가:

돋보기 이미지를 통합하려면 CSS 배경을 사용하여 할당하세요. -image 속성:

<code class="css">#g-search-button {
  background-color: black;  /* Replace with your own image */
}</code>

위치 지정 및 스타일링:

텍스트 입력 필드 내에서 이미지 위치를 지정하려면:

<code class="css">#g-search-button {
  position: relative;
  left: -22px;
  top: 3px;
  width: 16px;
  height: 16px;
}</code>

이 장소는 이미지를 약간 왼쪽에 배치하고 검색 상자의 오른쪽 가장자리와 겹칩니다.

사용자 정의:

#g의 값을 조정하여 버튼의 모양을 수정합니다. -배경 색상, 크기 및 위치를 포함한 검색 버튼 CSS 블록.

실행 예시:

완전히 작동하는 모습을 보려면 다음 JSBin 예시를 참조하세요. 검색 요소 구현:

[JSBin 데모](https://jsbin.com/xahepu/edit?html,css,output)

위 내용은 돋보기 아이콘이 있는 사용자 정의 \"검색\" 버튼을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!