增加功能:使用自定义图标显示记住我checkbox,消除不同浏览器对复选框不能居中问题
This commit is contained in:
parent
80c93b1f35
commit
3ffb84a67c
|
@ -62,10 +62,10 @@
|
||||||
<input type="password" name="password" class="form-control" value="" placeholder="密码" data-required-msg="请输入密码" data-valid="true" />
|
<input type="password" name="password" class="form-control" value="" placeholder="密码" data-required-msg="请输入密码" data-valid="true" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group rememberPwd" onselectstart="return false">
|
||||||
<div class="form-check">
|
<i class="fa fa-square-o"></i>
|
||||||
<input id="remember" name="remember" type="checkbox" class="form-check-input" value="true" /><label for="remember" class="form-check-label">记住我</label>
|
<span>记住密码自动登录</span>
|
||||||
</div>
|
<input id="remember" name="remember" type="hidden" value="false" />
|
||||||
</div>
|
</div>
|
||||||
<button class="btn btn-lg btn-login btn-block" type="submit">登 陆</button>
|
<button class="btn btn-lg btn-login btn-block" type="submit">登 陆</button>
|
||||||
<div class="login-footer">
|
<div class="login-footer">
|
||||||
|
|
|
@ -16,6 +16,15 @@
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.login-wrap .rememberPwd {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-wrap .rememberPwd i {
|
||||||
|
width: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
.login-footer a:last-child {
|
.login-footer a:last-child {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
@ -29,7 +38,7 @@
|
||||||
box-shadow: 0 4px #e56b60;
|
box-shadow: 0 4px #e56b60;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
outline: none !important;
|
outline: none !important;
|
||||||
margin-top: -8px;
|
margin-top: -4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-login:focus {
|
.btn-login:focus {
|
||||||
|
@ -44,7 +53,3 @@
|
||||||
.form-control {
|
.form-control {
|
||||||
border-color: #1ca0e9;
|
border-color: #1ca0e9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-check-label {
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
|
@ -24,4 +24,17 @@
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
})
|
|
||||||
|
$('.rememberPwd').on('click', function () {
|
||||||
|
var $this = $(this);
|
||||||
|
var $check = $this.find('i');
|
||||||
|
var $rem = $('#remember');
|
||||||
|
if ($check.hasClass('fa-square-o')) {
|
||||||
|
$check.addClass('fa-check-square-o').removeClass('fa-square-o');
|
||||||
|
$rem.val('true');
|
||||||
|
} else {
|
||||||
|
$check.addClass('fa-square-o').removeClass('fa-check-square-o');
|
||||||
|
$rem.val('false');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
Loading…
Reference in New Issue