例如,如果你去
https://github.com/signup/free
在用户名中键入“john”,右侧会出现一个小红色感叹号。忘记我知道怎么做的JavaScript,如何将图像输入到文本输入中?
答案 0 :(得分:3)
这是一个CSS backgound-image。
例如:
input {
background-image: url("/images/modules/ajax/error.png");
}
您还可以使用CSS background shorthand property指定图像。
答案 1 :(得分:1)
您可以将图像作为输入元素背景的一部分。
答案 2 :(得分:1)
以下是如何以相同的方式显示图像,即在右侧并且恰好适合框内:
<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更改className。
希望这会有所帮助:)
答案 3 :(得分:0)
如果您不想使用背景图像(因此您可以使用精灵图标,如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>