如何将图像添加到HTML输入窗口小部件？

问题描述：

，并键入“约翰”为用户名，出现在右手边的小红色感叹号。忘了我知道该怎么做的JavaScript，怎样才能在文本输入中获得图像？

答

这里是你如何可以显示图像以同样的方式，即在右侧，盒内只是配件：

<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有必要的。

希望这会有所帮助:)

答

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

答

这是一个CSS backgound-image。

例：

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

您也可以通过使用CSS background shorthand property指定图像。

答

如果你不想使用背景图片（所以你可以使用一个精灵图标，如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>

如何将图像添加到HTML输入窗口小部件？

相关推荐