span css无法正常工作

Question

I want to display span tag after input tag.

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>

Answer 1

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> 

Answer 2

我希望有一个小提琴，但根据我的理解，你可以尝试添加float: left到input和span

Answer 3

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> 

Answer 4

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>