前言
我们知道，.was-validated 或 .needs-validation 添加到 <form> 元素中，input 输入字段将具有绿色（有效）或红色（无效）边框效果，用于说明表单是否需要输入内容。但是我们有时候并不需要这样的边框，该怎么去除呢？请见下文。
误区
相信很多人一开始都是想着将outline设置为none，但却没有什么效果，实际上，我们检查输入框的动画，会发现有一个关于box-shadow的动画，因此，很明显，我们只要将box-shadow设置为none就行了
代码说明
为了更好的说明问题，我在这里贴一段代码，方便读者运行
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<form action="" class="was-validated">
<div class="form-group">
<label for="uname">Username:</label>
<input type="text" class="form-control" id="uname" style="box-shadow:none" placeholder="Enter username" name="uname" required>
<div class="valid-feedback">验证成功！</div>
<div class="invalid-feedback">请输入用户名！</div>
</div>
</form>
</div>
</body>
</html>这一段代码，给id=uname的标签设置了内联属性“style=box-shadow:none”，如果去掉，读者可以看看会发生什么，没错边框又回来了，至此，问题解决。
扫一扫
2431
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
