1

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

问题：我需要此图像（红色错误图像）位于我的输入字段的右侧，目前它只会留在输入字段内。

在此处输入图像描述

尝试的解决方案。

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

在此处输入图像描述

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

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

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

我很感谢大家的回应，不幸的是，这是一个死胡同，所提供的解决方案几乎都是我已经预料到的。谢谢你。

4

4 回答 4

4

您不能在表单元素上使用 :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>");

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

于 2013-05-21T14:10:35.810 回答
1

背景图像不能超出元素边界。

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

于 2013-05-21T14:08:25.507 回答
1

您可以将<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>
于 2013-05-21T14:34:21.773 回答
0

对于为 jQuery 创建片段可能更好的方法是这个解决方案。你可以改变你的背景图片

于 2013-05-21T14:20:41.053 回答