大佬教程收集整理的这篇文章主要介绍了css – Bootstrap 4表单输入,带有用于验证的图标，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
使用一些额外的CSS,您可以在输入内(右侧)放置一个图标,并在窗体控件输入上使用is-valid或is-invalid控制其显示.使用像fontawesome这样的字体库来显示图标.我创建了一个新的反馈图标类,您可以将其添加到有效/无效反馈中.
.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>
Demo of input validation icons
Demo with working validation
.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.
以上是大佬教程为你收集整理的css – Bootstrap 4表单输入,带有用于验证的图标全部内容，希望文章能够帮你解决css – Bootstrap 4表单输入,带有用于验证的图标所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。