1

セットアップ: CSS 以外は変更できません。変更を依頼することはできますが、HTML で変更できると簡単です。それ以外は、jQuery スニペットを作成して、開発者がそれを含めるかどうかを確認する必要があります。

問題: この画像 (RED INCORRECT IMAGE) を入力フィールドの右側に配置する必要があります。現在、入力フィールド内にのみ表示されます。

ここに画像の説明を入力

解決策を試みました。

.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>");

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

于 2013-05-21T14:10:35.810 に答える
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 に答える