Bootstrap 4表单输入带有图标以进行验证
Zim*_*Zim 10 css validation twitter-bootstrap font-awesome bootstrap-4
在Bootstrap 3中,每个验证状态都有可选的图标.该图标会使用出现在输入的右侧has-feedback,has-success,has-danger,等...班.
如何使用valid-feedback或invalid-feedback类在Bootstrap 4中获得相同的功能？
Bootstrap 4不包含图标(字形图已消失),现在只有2个验证状态(is-valid和is-invalid)控制valid-feedback和invalid-feedback文本的显示.
随着一点点额外的CSS,您可以定位输入(右侧)内的图标,并使用控制其显示is-valid或is-invalid上form-control输入.使用像fontawesome这样的字体库来显示图标.我创建了一个feedback-icon可以添加到的新类valid/invalid-feedback.
.valid-feedback.feedback-icon,
.invalid-feedback.feedback-icon {
position: absolute;
width: auto;
bottom: 10px;
right: 10px;
margin-top: 0;
}
HTML
<div class="form-group position-relative">
<label for="input2">Valid with icon</label>
<input type="text" class="form-control is-valid" id="input2">
<div class="valid-feedback feedback-icon">
<i class="fa fa-check"></i>
</div>
<div class="invalid-feedback feedback-icon">
<i class="fa fa-times"></i>
</div>
</div>
.valid-feedback.feedback-icon,
.invalid-feedback.feedback-icon {
position: absolute;
width: auto;
bottom: 10px;
right: 10px;
margin-top: 0;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="form-group position-relative">
<label for="input2">Valid with icon</label>
<input type="text" class="form-control is-valid" id="input2">
<div class="valid-feedback feedback-icon">
<i class="fa fa-check"></i>
</div>
<div class="invalid-feedback feedback-icon">
<i class="fa fa-times"></i>
</div>
</div>
</div>请注意,包含form-group是position:relative.
| 归档时间： |
|
| 查看次数： |
11101 次 |
| 最近记录： |