我正在使用以下 WordPress 函式來輸出 WP 搜索表單： echo get_search_form();
前端頂欄上的結果輸出：
<form class="search-form" method="get" action="http://bio-04.eproofs.ca/" role="search">
<label class="search-form-label screen-reader-text" for="searchform-1"> To search, type and hit enter.</label>
<input class="search-form-input" type="search" name="s" id="searchform-1" placeholder=" To search, type and hit enter.">
<input class="search-form-submit" type="submit" value="Search"><meta content="http://bio-04.eproofs.ca/?s={s}">
</form>
我想在占位符內添加一個搜索圖示（放大鏡）。目前我只有占位符內的文本。我嘗試使用 before 偽元素沒有運氣。如同：
label:before {
content: "";
position: absolute;
left: 10px;
top: 0;
bottom: 0;
width: 20px;
background: url("data:image/svg xml,") center / contain no-repeat;
}
該網站可以在這里找到：http : //bio-04.eproofs.ca/
是否可以僅使用 css 和輸出的現有類來做到這一點？
uj5u.com熱心網友回復：
標簽有一些屬性（可能是有意設計或由于框架），會阻止您的圖示顯示：
- 夾子
- 剪輯路徑
- 寬度：1px
- 高度：1px
如果您在標簽上禁用這些（從也添加這些的另一個類中禁用），您將看到您的圖示。但您也會看到標簽上的文本，這是您不想看到的。
這是我的建議，您將偽代碼放在表單標簽而不是標簽上。
form.search-form:before {
content: "";
position: absolute;
left: 10px;
top: 0;
bottom: 0;
width: 20px;
background: url("data:image/svg xml,") center / contain no-repeat;
}
還要添加以下內容，以便圖示保留在您的表單中
form.search-form {
position:relative;
}
從那里您可以決定將圖示放置在搜索框的右側，而不是距離左側 10 像素。如果您不希望搜索詞與搜索圖示重疊，您可以在輸入標簽的右側添加填充。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/405233.html
標籤：