Input field with background img outside of input

Question

Setup: I cannot change anything outside of the CSS, I can ask to change but It would be easier if this can be done in HTML. Other than that I will have to create a jQuery snippet and see if the developer will include it.

Problem: i need this image(RED INCORRECT IMAGE) to be to the right of my input field, currently it will only stay inside of the input field.

enter image description here

Solutions attempted.

.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

I also tried knowing this wouldnt work as well.

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

Appreciate any help in solving this. http://jsfiddle.net/cornelas/DpQXR/

I appreciate everyones responses unfortunately this is a deadend and the solutions offered are all pretty much what I already anticipated. Thank you.

You want to get effect like on first image, without any html/js changes. Am i right? — Kasyx, May 21 '13 at 14:02
well kind a logic as the image is displayed as background image, isnt it? — DiederikEEn, May 21 '13 at 14:04
What is the parent box of the `.passwordMismatch` element? Is it inside an input tag? That'd be really weird. Could you share some code? — webketje, May 21 '13 at 14:06
@Tyblitz The parent tag is a LI, which I have considered asking to have the .passwordMissmatch put on that, the input field currently has .passwordMissmatch. — Cam, May 21 '13 at 14:10
@Kasyx yes, without any, I am currently testing using :after with content: url(imglink); display:block; position:relative; to see if I can get any results, so far none. — Cam, May 21 '13 at 14:11

score 4 · Answer 1 · answered May 21 '13 at 14:10

You can't use the :after pseudo selector on a form element.

So just add a element after and position it from the left, something like:

.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;
}

... and add the element using jQuery ...

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

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

I got the idea for using :after from this post, http://stackoverflow.com/questions/1053950/css-background-image-positioning-negative-position what I intend on doing is having the developer move the .passwordMissmatch to the adjacent parent element LI — Cam, May 21 '13 at 14:15

score 1 · Answer 2 · edited May 23 '17 at 10:32

1

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

What I'd do is create a <span> element which floats next to the input and has the red balloon background. Show it when needed, hide it when not.

edited May 23 '17 at 10:32

Community

1
1

answered May 21 '13 at 14:08

Pankucins

1,690
1
16
25

I really wanted to avoid adding any further HTML, jQuery is on the board of possibilities currently, thank you for the info. – Cam May 21 '13 at 14:16

score 1 · Answer 3 · answered May 21 '13 at 14:34

You could use the <label> as a hook for the pseudo element. Positioning could be a little awkward, but anyhow, worth a try:

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>

The problem is that .passwordMissmatch is a dynamic class that only appears if you have not put the information correctly into the field. I think this is going to end up having to be changed in order to use the graphic. Thank you though. +1 — Cam, May 21 '13 at 14:37
Yes, of course, I should have thought of that. In these situations, it's not really practical to be constrained to CSS alone, when modifying the HTML/JS would make life much easier. — ralph.m, May 21 '13 at 14:46

score 0 · Answer 4 · answered May 21 '13 at 14:20

0

For creating snippet for jQuery may be better a route is this solutions . You can to change the background image on yours

answered May 21 '13 at 14:20

Abbasov Alexander

1,848
1
18
27

Input field with background img outside of input

4 Answers4