具有 CSS 属性的解决方案
在本教程中，我们将找到一些在具有 CSS 属性的输入字段周围创建发光边框的方法。
在下面的示例中，我们将 :focus 伪类添加到 <input> 元素，然后指定 border-color 和 box-shadow 属性。
此外，我们将轮廓属性设置为“无”。
在输入字段周围创建发光边框的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
label {
display: block;
margin: 20px;
overflow: auto;
font-family: sans-serif;
font-size: 18px;
color: #444;
text-shadow: 0 0 2px #000;
padding: 20px 10px 10px 0;
}
input {
width: 150px;
border: 2px solid #aeaeb5;
border-radius: 6px;
font-size: 20px;
padding: 2px;
margin-top: -10px;
}
input:focus {
outline: none;
border-color: #26bf47;
box-shadow: 0 0 10px #26bf47;
}
</style>
</head>
<body>
<form action="/form/submit" method="post">
<label>Enter your password:
<input name="password" type="password">
</label>
<label> Confirm your password:
<input name="password-confirm" type="password">
</label>
</form>
</body>
</html>
使用 transition 属性在输入字段周围创建发光边框的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
body {
margin: 20px;
}
.text {
border: 2px solid #b2b7c2;
font-size: 22px;
-webkit-transition: box-shadow linear 1s;
transition: box-shadow linear 1s;
}
.text:focus {
box-shadow: 0 0 20px #143b91;
}
</style>
</head>
<body>
<input type="name" class="text">
</body>
</html>
同样，我们在 <input> 元素的 class 属性上使用了 :focus 伪类。 然后，我们添加了 CSS 过渡属性。
让我们再看一个例子。
在 input 和 textarea 字段周围创建发光边框的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
input[type=text],
textarea {
transition: all 0.30s ease-in-out;
outline: none;
padding: 2px 0px 2px 2px;
margin: 5px 1px 3px 0px;
border: 1px solid #aeb5bf;
}
input[type=text]:focus,
textarea:focus {
box-shadow: 0 0 5px rgba(0, 31, 153, 1);
padding: 2px 0px 2px 2px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(0, 31, 153, 1);
}
label {
width: 100px;
float: left;
}
body {
padding: 10px;
}
</style>
</head>
<body>
<form>
<div>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" tabindex="1" />
</div>
<div>
<label for="textarea">Textarea:</label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>
</form>
</body>
</html>
日期：2020-06-02 22:15:01 来源：oir作者：oir