Question

设置：我无法更改CSS之外的任何内容，我可以要求更改，但如果可以在HTML中完成此操作会更容易。除此之外，我将不得不创建一个jQuery片段，看看开发人员是否会包含它。

问题：我需要将此图像（RED INCORRECT IMAGE）放在输入字段的右侧，目前它只会保留在输入字段的内部。

enter image description here

尝试解决方案。

.passwordMismatch {
    background: url("layout/pw_error_tooltip.png") repeat scroll 0 0 transparent;
    border-color: red !important;
    border-width: 2px !important;
}

enter image description here

我也试过知道这也行不通。

.passwordMismatch:after {
    background: url("layout/pw_error_tooltip.png") repeat scroll 0 0 transparent;
    height: 40px;
    padding-right: 200px;
}

感谢您解决此问题的任何帮助。 http://jsfiddle.net/cornelas/DpQXR/

我很欣赏每个人的回应，不幸的是，这是一个负面因素，提供的解决方案几乎都是我已经预料到的。谢谢。

Answer 1

您不能在表单元素上使用：after伪选择器。

所以只需在左边添加一个元素并从左边开始定位，例如：

.passwordMistmatchMessage {
    display: block;
    content: "";
    background: url("https://selfservice.ennis.com/layout/pw_error_tooltip.png") repeat scroll 0 0 transparent;
    border-color: red !important;
    border-width: 2px !important;
    width: 176px;
    height: 30px;
    position: absolute;
    left: 320px;
    top: 8px;
}

...并使用jQuery添加元素...

$(".passwordMismatch").after("<span class='passwordMistmatchMessage'></span>");

@see http://jsfiddle.net/DpQXR/2/

Answer 2

You can't have a background image going outside of elements boundaries.

我要做的是创建一个<span>元素，该元素浮动在输入旁边并具有红色气球背景。需要时显示，不用时隐藏。

Answer 3

您可以使用<label>作为伪元素的钩子。定位可能有点尴尬，但无论如何，值得一试：

http://codepen.io/pageaffairs/pen/JDIix

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
label.new {position: relative; display: block;}

label:after {
    content: " ";
    background: url("https://selfservice.ennis.com/layout/pw_error_tooltip.png") repeat scroll 0 0 transparent;
    position: absolute;
    left: 320px;
    top: 100%;
    height: 30px; 
    width: 176px;
}
input {
    border: 1px solid #87888A;
    color: #888888;
    font-family: arial;
    font-size: 14px;
    height: 27px;
    padding: 0 4px;
    width: 300px;
    position: relative;
}

</style>

</head>
<body>

<label for="newpassword1" class="new">New Password:</label>
<input type="password" onblur="com_micrlink_passwordValidate()" name="Password1" class="Password passwordMismatch" id="newpassword1">

</body>
</html>

Answer 4

为了创建jQuery的代码段，这个路由可能更好solutions。您可以更改自己的背景图像

输入字段与输入之外的背景图像

4 个答案: