使用CSS样式设置边框颜色
1、内联样式
内联样式是直接在HTML元素中添加样式属性的方式，我们可以通过为<input>元素添加style属性来设置边框颜色，给一个文本框设置红色边框：
Markup
<input type="text" style="border: 1px solid red;">
2、内部样式表(Internal Style Sheet)
内部样式表是在HTML文档的<head>部分添加<style>标签来定义的样式，我们可以为<input>元素添加一个类名，然后在<style>标签中为这个类名设置边框颜色。
Markup
<!DOCTYPE html>
<html>
<head>
<style>
.red-border {
border: 1px solid red;
}
</style>
</head>
<body>
<input type="text" class="red-border">
</body>
</html>
3、外部样式表(External Style Sheet)
外部样式表是在HTML文档外部创建的一个CSS文件，通常以.css为扩展名，我们需要在HTML文档的<head>部分引入这个CSS文件，我们可以在CSS文件中为<input>元素设置边框颜色，创建一个名为styles.css的文件，内容如下：
CSS
input[type="text"] {
border: 1px solid red;
}
接下来，在HTML文档中引入这个CSS文件：
Markup
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="text">
</body>
</html>
使用JavaScript动态设置边框颜色
我们可能需要根据用户的选择或者其他条件来动态地改变文本框的边框颜色，这时，我们可以使用JavaScript来实现这一功能，以下是一个简单的示例：
Markup
<!DOCTYPE html>
<html>
<head>
<style>
.red-border {
border: 1px solid red;
}
</style>
</head>
<body>
<input type="text" id="myInput" class="">
<button onclick="changeBorderColor('red')">红色边框</button>
<button onclick="changeBorderColor('blue')">蓝色边框</button>
<button onclick="changeBorderColor('green')">绿色边框</button>
<script>
function changeBorderColor(color) {
const input = document.getElementById('myInput');
input.classList.add(color);
}
</script>
</body>
</html>
在这个示例中，我们为三个按钮分别绑定了不同的点击事件，当用户点击这些按钮时，会调用changeBorderColor函数，并传入相应的颜色参数，函数会获取文本框元素，然后为其添加一个新的类名，从而改变其边框颜色。
微信扫一扫 
支付宝扫一扫 