Span css is not working correctly
I want to show the span tag after the input tag.
But it appears before the input tag. Here I have attached the css and html code.
http://jsfiddle.net/sarurakz/8j3r13ec/
CSS
span{
float:right;
margin-right:1%;
}
input {
display: inline-block;
float: right;
margin-right:20%;
}
Html
<p>Password<input type="password" name="pass" id="pass" size=18 maxlength=50 required></p>
<p>Confirm Password<input type="password" name="cpass" id="cpass" size=18 maxlength=50 required><span id='message'></span></p>
validation:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script>
$('#pass, #cpass').on('keyup', function () {
if ($('#pass').val() == $('#cpass').val()) {
$('#message').html('<img src="image/tick.png" width=15px height=15/>').css('color', 'green');
$("#phone").prop('disabled', false);
}
else{ $('#message').html('<img src="image/delete1.png" width=15px height=15/>').css('color', 'red');
$("#phone").prop('disabled', true);}
});
</script>
+3
source to share
4 answers
I didn't have any image, so I just put some random text there in between
span{
float:right;
margin-right: 8%;
margin-left: -17%;
}
input {
display: inline-block;
float: right;
margin-right:20%;}
<p>Password<input type="password" name="pass" id="pass" size=18 maxlength=50 required></p>
<p>Confirm Password<span id='message'>asdasd</span><input type="password" name="cpass" id="cpass" size=18 maxlength=50 required></p>
+5
source to share
You cannot validate and add a checkmark image using HTML and CSS alone. You will need to do validation in Javascript.
See this piece of working code:
document.getElementById('pass').addEventListener('blur', function(){
var passwordLength = document.getElementById('pass').value.length;
if(passwordLength > 8 && passwordLength < 50){
var image = document.createElement('img');
image.src = 'http://yoozy.com/images/tick-icon.jpg';
this.parentNode.insertBefore(image, document.getElementById('pass'));
}
});
span{
float:right;
margin-right:1%;
}
input {
display: inline-block;
float: right;
margin-right:20%;
}
<p>Enter atleast 8 characters in this first password field and focusout to see thie validation working.</p>
<p>
Password
<input type="password" name="pass" id="pass" size=18 maxlength=50 required>
</p>
<p>
Confirm Password
<input type="password" name="cpass" id="cpass" size=18 maxlength=50 required>
<span id='message'></span>
</p>
+1
source to share
use the label and padding to the right and align the absolute span position
Using a label automatically focuses the input when clicking on text
label {
width: 400px;
display: inline-block;
padding: 0 30px 0 0;
position: relative;
margin: 5px 0;
}
input {
float: right;
}
span.icon {
font-size: 14px;
color: white;
text-align: center;
display: block;
line-height: 23px;
background: rgb(18, 208, 27);
border-radius: 50%;
width: 20px;
height: 20px;
right: 0px;
position: absolute;
top: 0;
}
<label>username
<input type="text" name="pass" id="pass" size=18 maxlength=50 required />
</label>
<label>Password
<input type="password" name="pass" id="pass" size=18 maxlength=50 required /> <span class="icon">✓</span>
</label>
+1
source to share