由于<input>通常是浏览器UI，所以不能在其中应用样式，这是伪元素::before和::after的作用。
另请参阅CBroe对https://stackoverflow.com/a/20894312/1427878的重要提示
模拟在输入中添加内容的一个常见解决方案是隐藏其边界并将其提供给 Package 器元素。
但是，您绝对需要确保焦点保持可见，例如using :focus-within

.input-like {
  display: inline-block;
  border: 1px solid gray;
  border-radius: 2px;
  padding: .1em;
}

.input-like:focus-within {
  outline: 1px solid blue;
}

.input-like::after {
  content: "i";
  width: 25px;
  display: inline-block;
}
input {
  border: none;
}

input:focus {
  outline: none;
}

<label for="pwd">Choose your password</label>
<div class="input-like">
  <input type="password" id="pwd" autocomplete="new-password">
</div>

由于图标只是视觉表示，因此它应该有一个可访问的名称，如图像的alt。根据它要传达的内容，可能需要一些ARIA属性，例如<input aria-description="some explanation">