我想在输入标签后显示span标签。
但它在输入标签之前显示。 这里我附上了css和html代码。
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>
答案 0 :(得分:5)
我没有任何图像,所以我只是在其中放置一个随机文本
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>
答案 1 :(得分:3)
我希望有一个小提琴,但根据我的理解,您可以尝试将float: left
添加到input
和span
答案 2 :(得分:1)
您无法进行验证并仅使用HTML和CSS添加刻度图像。您需要在Javascript中进行验证。
请参阅工作代码段
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>
答案 3 :(得分:1)
使用右边的标签和填充,并将跨度位置对齐绝对
使用标签会自动将输入聚焦于文本点击
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>