CODEWITHSUNDEEP
htmlcss
user3386779
user3386779

Reputation: 7215

span css is not working properly

I want to display span tag after input tag. I want to display the tick mark after the input text

But it displays before input tag. Here I attached 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>

Upvotes: 3

Views: 1578

Answers (4)

Vitorino fernandes
Vitorino fernandes

Reputation: 15981

use label and padding right and align the span position absolute

using label automatically focuses the input on click of 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">&#10003;</span>
</label>

Upvotes: 1

Rahul Desai
Rahul Desai

Reputation: 15501

You cant do the validation and adding the tick image just with HTML and CSS. You will need to do the validation in Javascript.

See this working code snippet:

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>

Upvotes: 1

Tushar Gupta
Tushar Gupta

Reputation: 15943

I was not having any image so i just placed a random text there in span

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>

Upvotes: 5

Abhi
Abhi

Reputation: 4271

I wish a fiddle was there for this, but as per my understanding you can try to add float: left to both input and span

Upvotes: 3

Related Questions