我創建了一個輸入欄位，如下所示：
.search-bar {
max-width: 400px;
margin: 20px 50px;
border: none;
}
#searchBarInput {
position: relative;
background: transparent;
padding: 12px 24px;
border-radius: 8px;
border: 2px solid black;
width: 100%;
}
.search-bar__icon {
position: absolute;
height: 100%;
width: 32px;
right: 10px;
top: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
href="https://fonts.googleapis.com/icon?family=Material Icons"
rel="stylesheet"
/>
<link href="example.css" rel="stylesheet" />
</head>
<body>
<div class="search-bar" id="searchBar">
<input type="text" placeholder="Search User" id="searchBarInput" />
<i class="material-icons search-bar__icon">search</i>
</div>
</body>
</html>我正在嘗試在輸入欄位內顯示搜索圖示。我真的想在位置引數的幫助下實作這一點，但我沒有：圖示位于螢屏的右上角。順便提一下：輸入欄位似乎也大于 400px。
uj5u.com熱心網友回復：
具有 position: 的元素absolute相對于最近的定位祖先定位（它的位置不是 的元素static。請考慮所有 HTML 元素static默認都有位置）。
然而; 如果絕對定位元素沒有定位祖先，則它使用檔案正文（如您的圖示元素）。
因此，只需設定.search-bar相對位置即可解決您的問題。
search-bar {
...
position: relative;
}
uj5u.com熱心網友回復：
如果您只想使用 Material Design 圖示，[https://material.io/develop/web/supporting/text-field-icon] 顯示匯入他們的 CDN 并使用他們的標簽/跨度類。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet" />
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet" />
<link href="style,css" rel="stylesheet" />
</head>
<body>
<label class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon">
<span class="mdc-notched-outline">
<span class="mdc-notched-outline__leading"></span>
<span class="mdc-notched-outline__notch"> </span>
<span class="mdc-notched-outline__trailing"></span>
</span>
<i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">clear</i>
<input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id" />
<i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading">search</i>
</label>
<label class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon">
<span class="mdc-notched-outline">
<span class="mdc-notched-outline__leading"></span>
<span class="mdc-notched-outline__notch"> </span>
<span class="mdc-notched-outline__trailing"></span>
</span>
<i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading">search</i>
<input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id" />
<i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">clear</i>
</label>
</body>
</html>uj5u.com熱心網友回復：
這可以通過使用font-awesome和添加一個類來實作，i class以將搜索圖示定位在輸入欄位內。在本例中，我創建了一個示例類，.position用于定位搜索圖示。您還可以通過a tag在您的圖示上用作搜索按鈕來擴展此功能。請查看我對您的 HTML 和 CSS 所做的更改。
.search-bar {
max-width: 400px;
margin: 20px 50px;
border: none;
padding: 17px;
position: relative;
}
#searchBarInput {
position: relative;
background: transparent;
padding: 12px 24px;
border-radius: 8px;
border: 2px solid black;
width: 100%;
}
.position {
position: relative;
left: 21rem;
top: -2.3rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
<link href="example.css" rel=stylesheet>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
</head>
<body>
<div class="search-bar" id="searchBar">
<input type="text" placeholder="Search User" id="searchBarInput">
<i class="fas fa-search position"></i>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/379690.html
標籤：css