javascript - 如何在输入标签中嵌入 SVG 图像图标？

Question

我正在尝试将“search.svg”图像嵌入到 AngularJS 的文本框中，如下图所示

但我没有得到预期的结果。 它的渲染如下图所示

我试过了—— 我的 html 文件

<div class="right-inner-addon pull-left col-lg-4">
    <input type="text" class="form-control input-append" />
    <img role="img" src="img/icons/search.svg" />
</div>

我的 CSS 文件

.right-inner-addon {
    position: relative;
}
.right-inner-addon input {
    padding-right: 30px;
}
.right-inner-addon img {
    position: absolute;
    right: 0px;
    padding: 10px 12px;
    pointer-events: none;
}

Answer 1

确保您在 .right-inner-addon img 上设置了 top: 0;(或任何符合您需要的值)。

这是一个快速 example .