首頁  >  文章  >  web前端  >  如何建立帶有放大鏡圖示的自訂「搜尋」按鈕?

如何建立帶有放大鏡圖示的自訂「搜尋」按鈕?

Patricia Arquette
Patricia Arquette原創
2024-11-02 10:12:02941瀏覽

How to Create a Custom

使用自訂「搜尋」按鈕修飾文字輸入欄位

要建立與某些網站上看到的類似的搜尋元素,請按照這些步驟:

建立基本結構:

  1. 編寫文字輸入欄位:
<code class="html"><input type="text" name="q" id="site-search-input" autocomplete="off" value="Search" class="gray" /></code>
  1. 包含一個標籤來保存放大鏡影像:
<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 中的值來修改按鈕的外觀-search-button CSS 區塊,包括背景顏色、大小和位置。

實際範例:

請參考以下JSBin 範例以查看完整功能搜尋元素的實作:

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

以上是如何建立帶有放大鏡圖示的自訂「搜尋」按鈕?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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