如何将Enter键SVG图标嵌入input的placeholder属性中？

我有一个代表Enter键的SVG图标，代码如下：

<kbd class="DocSearch-Commands-Key">
    <svg width="15" height="15" aria-label="Enter key" role="img">
        <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2">
            <path d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"></path>
       </g>
   </svg>
</kbd>

还有一个文本输入框：

<input type="text" placeholder="Press the ENTER key">

我希望把这个SVG图标嵌入到input的placeholder里，让placeholder呈现类似「Press the <-| key」的效果。

补充说明：按钮图标样式需参考类似「<-|」的按键样式。

原生<input>的placeholder仅支持纯文本，无法直接嵌入HTML或SVG，可通过以下两种方式实现需求：

方法一：用CSS伪元素模拟带图标的placeholder #

给input套一个父容器，利用伪元素模拟带图标的占位文本，输入框有内容时自动隐藏：

HTML代码 #

<div class="input-container">
  <input type="text" placeholder=" " />
</div>

CSS代码 #

.input-container {
  position: relative;
  display: inline-block;
}

/* 模拟占位文本的内容和样式 */
.input-container:has(input:placeholder-shown)::before {
  content: "Press the ";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #999; /* 匹配原生placeholder的灰色 */
  pointer-events: none; /* 不影响输入框的点击交互 */
}

/* 插入SVG图标并添加按键样式 */
.input-container:has(input:placeholder-shown)::after {
  content: "";
  position: absolute;
  left: 72px; /* 根据前面文本长度调整位置 */
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  padding: 2px 4px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #f5f5f5;
  /* 把SVG转为Data URI，替换stroke颜色为占位文本的灰色 */
  background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' aria-label='Enter key' role='img'%3E%3Cg fill='none' stroke='%23999' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.2'%3E%3Cpath d='M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}

/* 输入框有内容时隐藏模拟的占位元素 */
.input-container:has(input:not(:placeholder-shown))::before,
.input-container:has(input:not(:placeholder-shown))::after {
  display: none;
}

方法二：用Data URI直接插入placeholder（兼容性有限） #

把SVG编码成Data URI后，通过::placeholder伪元素的content属性插入图标，写法简洁但部分旧浏览器不支持：

CSS代码 #

input::placeholder {
  color: #999;
}

input::placeholder {
  content: "Press the " url("data:image/svg+xml,%3Csvg width='15' height='15' aria-label='Enter key' role='img'%3E%3Cg fill='none' stroke='%23999' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.2'%3E%3Cpath d='M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") " key";
  white-space: pre;
  letter-spacing: 2px; /* 调整图标和文本的间距 */
}

内容的提问来源于stack exchange，提问作者user20942674