首頁 >web前端 >css教學 >如何在文字輸入欄位中建立搜尋按鈕?

如何在文字輸入欄位中建立搜尋按鈕?

DDD
DDD原創
2024-11-02 10:15:03698瀏覽

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

在文字輸入欄位中建立搜尋按鈕

要實現所提供的螢幕截圖中看到的搜尋元素,您需要文字輸入字段和相鄰的span 元素。

可以使用以下程式碼建立文字輸入欄位:

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

對於放大鏡影像,可以使用 background-image 屬性來疊加它在 span 元素內。另外,還可以使用相對定位將影像與搜尋框的右端對齊。

#g-search-button {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  left: -22px;
  top: 3px;

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

在 CSS 程式碼中,寬度和高度決定圖像的大小,而左側和頂部決定圖像的大小。屬性將其相對於搜尋框定位。背景顏色屬性可以替換為您想要的放大鏡圖像的 URL。

這裡有一個 JSBin 上的工作範例來示範:[連結到 JSBin 範例]

以上是如何在文字輸入欄位中建立搜尋按鈕?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn