我正在嘗試撰寫一個帶有放大鏡圖示且沒有搜索按鈕的搜索欄。我找到了一個示例資源，我將其作為代碼的基礎：Search Icon Inside Input。
我很難讓放大鏡圖示出現。此外，還有搜索欄本身在我的主導航容器中沒有垂直對齊的問題。
我在URL Encoder for SVG Tool中使用 URL encoder for SVG tool和帶有背景標簽的字體真棒圖示：
<i class="fa-solid fa-magnifying-glass"></i>
這是我的 style.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,") 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>
uj5u.com熱心網友回復：
您的代碼中有很多問題，所以讓我們一一解決。
1.錯誤的選擇器
input .nosubmit沒有指向任何東西。你的班級被命名.no-submit，如果你想選擇input特定班級，你必須這樣寫input.no-sumbit。您的選擇器正在.no-submit元素input中尋找。
2.錯誤使用background
這是如何background在 CSS 中使用的一個很好的示例。我還沒有找到background你在一個屬性中寫入所有引數的用法，就像你所做的那樣（我并不是說它不起作用），所以我將它解封裝為更多屬性。當您想以url()更好的方式添加影像時，插入影像的路徑而不是 SVG 檔案內部。例如，我選擇了一個隨機放大鏡圖示并像這樣匯入它：
background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg") ;
您也可以匯入您的本地檔案，它不必在線。只需更改 SVG 的相對或絕對路徑的 URL。
3.background只在需要時使用background-color
大多數時候這可能并不重要，但在您的代碼中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,") ;*/
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>此外，我添加了填充，因此文本不會在您的放大鏡上。
uj5u.com熱心網友回復：
放大鏡圖示出現在谷歌圖示中。試試這個代碼：
<head>
<style>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons">
<style>
</head>
<body>
<i class="material-icons">search</i>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/425171.html
上一篇：如何在MicrosoftAccess表單中創建分支邏輯/跳過規則？
下一篇：如何阻止此欄位集溢位其容器？