如何将图像添加到 HTML 输入小部件？答案

【问题标题】：How do I add an image to an HTML input widget?如何将图像添加到 HTML 输入小部件？
【发布时间】：2012-04-26 19:46:31
【问题描述】：

例如，如果你去

https://github.com/signup/free

在用户名中输入“john”，右侧会出现一个红色的小感叹号。忘记我知道怎么做的 JavaScript，你怎么能把图像输入到文本输入中？

【问题讨论】：

标签： html css forms html-input

【解决方案1】：

您可以使图像成为输入元素背景的一部分。

【讨论】：

【解决方案2】：

这是一个 CSS backgound-image。

例如：

input {
    background-image: url("/images/modules/ajax/error.png");
}

您还可以使用 CSS background shorthand property 指定图像。

【讨论】：

【解决方案3】：

如果你不想使用背景图片（所以你可以使用精灵图标，比如 jQuery UI），你可以使用绝对定位来覆盖图标。

示例（未经测试）：

<div style='display: inline-block; position: relative;'>
    <input type=text />
    <span class='ui-icon ui-icon-alert ui-state-error' style='position: absolute; display: block; margin-top: -8px; top: 50%; right: 4px;' />
</div>

【讨论】：

【解决方案4】：

您可以通过以下方式以相同的方式显示图像，即在右侧并刚好适合框内：

<style type="text/css">
.input_error_bg {
    background-image: url("myimage.png");
    background-size: contain;
    -moz-background-size: contain;
    -webkit-background-size: contain;
    -khtml-background-size: contain;
    -o-background-size: contain;
    background-position: right 50%;
    background-repeat: no-repeat;
}
.input_bg {
    background: none;
}
</style>

<form action="signup.php" method="POST">
<input class="input_error_bg" type="text" />
</form>

根据需要使用 javascript 更改类名。

希望这会有所帮助:)

【讨论】：