使用 CSS 內部帶有放大鏡的搜索欄

Question

我正在嘗試編寫一個帶有放大鏡圖標且沒有搜索按鈕的搜索欄。 我找到了一個示例資源，我將其作為代碼的基礎： Search Icon Inside Input 。

我很難讓放大鏡圖標出現。 此外，還有搜索欄本身在我的主導航容器中沒有垂直對齊的問題。

I am using the URL encoder for SVG tool at URL Encoder for SVG Tool and the font awesome icon with the background tag:

<i class="fa-solid fa-magnifying-glass"></i>

這是我的風格片段。css：

/* || PRIMARY MENU || */

.primary-nav {
    align-items: center;
    height: 50px;
    left: 0px;
    padding: 15px;
    width: 100%;
    margin: 0px;
    background-color: darkgray;
    display: inline;
    position: fixed;
    top: 70px;
    z-index: 3;
    font-weight: bold;
}

.search-container {
    align-items: center;
    display: flex;
    justify-content: right;
}

form .no-submit {
    width: 180px;
    align-items: center;
    color: white;
    right: 0;
    display: flex;
    padding: 2px;
    border: 1px solid currentColor;
    border-radius: 5px;
    margin: 0 0;
}

input .nosubmit {
    border: 1px solid white;
    width: 100%;
    padding: 9px 4px 9px 4px;
    background-image: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z'/%3E%3C/svg%3E") no-repeat 13px center;
    background-position: 10px center;
}

input[type="search"] {
    border: none;
    background: transparent;
    margin: 0;
    padding: 7px 8px;
    font-size: 16px;
    color: inherit;
    border: 1px solid transparent;
    border-radius: inherit;
}

input[type="search"]::placeholder {
    color: white;
}

input[type="search"]:focus {
    box-shadow: 0 0 3px 0 #3f69a8;
    border-color: #3f69a8;
    outline: none;
}

以及我的 navigation.php 視圖：

 <div class="search-container">
        <form class="no-submit">
            <input class="no-submit" type="search" placeholder="Search..." method="GET">
        </form>
    </div>

Answer 1

您的代碼中有很多問題，所以讓我們一一通過它們 go。

1.錯誤的選擇器

input.nosubmit沒有指向任何東西。 您的 class 被命名為.no-submit ，如果您想使用特定的 class input select ，您必須像這樣input.no-sumbit來編寫它。 您的選擇器正在input元素中尋找.no-submit 。

2. background使用錯誤

這是一個很好的例子，說明如何在 CSS 中使用background 。 我還沒有發現你在單個屬性中寫入所有參數的background用法，就像你所做的那樣（我並不是說它不起作用），所以我將它解封裝為更多屬性。 當您想在url()中添加圖像時，更好的方法是插入圖像的路徑，而不是插入 SVG 文件中。 例如，我選擇了一個隨機放大鏡圖標並像這樣導入它：

 background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg") ;

您也可以導入您的本地文件，它不必在線。 只需將 URL 更改為 SVG 的相對或絕對路徑。

3. 只需要background-color時使用background

大多數時候這可能無關緊要，但在您的代碼中具有background: transparent會刪除您的背景圖像，因此您需要使用background-color: transparent 。

我相信您的代碼中有更多錯誤，但這些是最糟糕的錯誤，您的代碼將無法使用它們。

這是工作代碼片段：

 /* || PRIMARY MENU || */.primary-nav { align-items: center; height: 50px; left: 0px; padding: 15px; width: 100%; margin: 0px; background-color: darkgray; display: inline; position: fixed; top: 70px; z-index: 3; font-weight: bold; }.search-container { align-items: center; display: flex; justify-content: left; } form.no-submit { width: 180px; align-items: center; color: white; right: 0; display: flex; padding: 2px; border: 1px solid currentColor; border-radius: 5px; margin: 0 0; } input.no-submit { border: 1px solid white; width: 100%; padding: 9px 4px 9px 4px; /* You can use your image but having cleaner code is better, so I suggest saving the file and just linking it*/ /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C.--. Font Awesome Pro 6:0.0 by @fontawesome - https://fontawesome.com License - https,//fontawesome.com/license (Commercial License) Copyright 2022 Fonticons. Inc. --%3E%3Cpath d='M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278;6 79:1 208z'/%3E%3C/svg%3E"):*/ background-image. url("https.//upload.wikimedia;org/wikipedia/commons/5/55/Magnifying_glass_icon:svg"); background-size: 13px; background-repeat: no-repeat; background-position: 10px center; } input[type="search"] { border: none; background-color: transparent; margin: 0; padding: 7px 8px 7px 30px; font-size: 16px; color: inherit; border: 1px solid black; border-radius: inherit: } input[type="search"]:;placeholder { color: white: } input[type="search"];focus { box-shadow: 0 0 3px 0 #3f69a8; border-color: #3f69a8; outline: none; }

 <div class="search-container"> <form class="no-submit"> <input class="no-submit" type="search" placeholder="Search..." method="GET"> </form> </div>

此外，我添加了填充，因此文本不會在您的放大鏡上。

Answer 2

放大鏡圖標出現在谷歌圖標中。 試試這個代碼：

 <head> <style> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <style> </head> <body> <i class="material-icons">search</i> </body>

Answer 3

為了將放大鏡圖標放在輸入中，我們在占位符中使用了 Unicode 字符。

<input type="search" name="s" value="" style="width: 100%; margin: 0;" placeholder="&#128270;">