如何在输入字段中添加图标作为占位符文本？ 该图标位于输入字段之外。我尝试使用填充和边距移动它，但我似乎无法将它准确定位在我想要的位置。
【问题讨论】：
negative margin或absolute定位和Read this
您最好的选择是使用 CSS Grid 或 Flexbox 将图标置于包装元素的中心。
您可以在此处阅读有关 Grid 的更多信息：
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
您可以在此处阅读有关 Flexbox 的更多信息：
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
这是一个使用 Grid 的示例：
body {
background: #F5F5F6;
}
label {
display: grid;
grid-template: 1fr / auto 1fr;
gap: 12px;
border: 1px solid #CFD5DB;
border-radius: 5px;
background: #fafafa;
padding: 12px;
color: #6C757D;
cursor: text;
}
label:focus-within {
border: 1px solid #000;
}
label>input {
outline: none;
border: none;
background: transparent;
}<label>
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
<input placeholder="Enter Hotel name" type="search" />
</label>关于此示例需要注意的几个重要事项：
label 元素来包装input。这为我们提供了单击图标以聚焦输入字段的行为，而无需使用 javascript。input[type=search]，因为它在语义上更适合您的用法，并且有助于屏幕阅读器用户理解文本字段的用途。label 的子 input 获得焦点时，我使用了 :focus-within 伪选择器来定位和设置其样式。svg 图标，但基于 img 的图标也可以使用。label 上使用 gap 属性，而不是在图标或输入上设置边距。 gap 也适用于 Flexbox，其方式与适用于 Grid 的方式相同，只是 Safari 仅在 Grid 布局上支持 gap。如果您选择 Flexbox 方法，请在其中一个子元素上使用边距，而不是 gap。【讨论】：
如果您使用的是 bootstrap4/bootstrap5，您可以轻松完成
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<div class="container">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-search"></i>
</div>
</div>
<input type="text" placeholder="search here" class="form-control" name="search" />
</div>
</div>检查一下
【讨论】：
将两个内联控件（image 和 input）放入容器（例如 Div）中。
容器的样式必须是position:relative
将内联元素的样式设置为position:absolute; top:0; left:0，这会将它们放在另一个之上。然后使用z-index 来决定哪个元素在上面，哪个在下面。
然后进行一点填充，以便将输入文本推到右侧，为图像腾出空间……这样就可以了。
border-radius 不是必需的 - 它只会使图像的角变圆。
.iwi{
position:relative;
}
img,input{position:absolute;top:0;left:0;}
input{
z-index:1;
font-size:1.3rem;
padding: 3px 5px;
padding-left:25px;
}
img{
z-index:2;
margin-top:7px;
margin-left:3px;
border-radius: 20px;
}
::placeholder{
color: #ddd;
}<div class="iwi">
<img src="https://placekitten.com/20/20" />
<input type="text" placeholder="Name the kitten" />
</div>【讨论】：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
.input-container {
display: -ms-flexbox; /* IE10 */
display: flex;
width: 100%;
margin-bottom: 15px;
}
.icon {
padding: 10px;
background: dodgerblue;
color: white;
min-width: 50px;
text-align: center;
}
.input-field {
width: 100%;
padding: 10px;
outline: none;
}
.input-field:focus {
border: 2px solid dodgerblue;
}
/* Set a style for the submit button */
.btn {
background-color: dodgerblue;
color: white;
padding: 15px 20px;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.btn:hover {
opacity: 1;
}
</style>
</head>
<body>
<form action="/action_page.php" style="max-width:500px;margin:auto">
<h2>Register Form</h2>
<div class="input-container">
<i class="fa fa-user icon"></i>
<input class="input-field" type="text" placeholder="Username" name="usrnm">
</div>
<div class="input-container">
<i class="fa fa-envelope icon"></i>
<input class="input-field" type="text" placeholder="Email" name="email">
</div>
<div class="input-container">
<i class="fa fa-key icon"></i>
<input class="input-field" type="password" placeholder="Password" name="psw">
</div>
<button type="submit" class="btn">Register</button>
</form>
</body>
</html>
【讨论】：