在HTML中，文件输入框（通常表示为<input>标签，类型为"file"）的样式默认情况下是无法修改的，这是因为浏览器出于安全和一致性的考虑，限制了对文件输入框样式的自定义，我们可以通过一些技巧和方法来实现让文件框变红色的效果。
1、使用CSS伪元素
通过CSS伪元素，我们可以在不改变原有文件输入框样式的基础上，为其添加一层红色的样式，这种方法需要我们创建一个自定义的文件输入按钮，并使用CSS伪元素来覆盖原有的文件输入框。
我们需要在HTML中创建一个包含自定义按钮的文件输入框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>红色文件框</title>
<style>
.file-input {
position: relative;
display: inline-block;
}
.file-input input[type="file"] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 2;
}
.file-input button {
position: relative;
z-index: 1;
}
</style>
</head>
<body>
<div class="file-input">
<input type="file" id="fileInput">
<button onclick="document.getElementById('fileInput').click()">点击这里上传文件</button>
</div>
</body>
</html>
在这个例子中，我们创建了一个包含文件输入框和自定义按钮的容器，通过CSS样式，我们将文件输入框的透明度设置为0，使其不可见，同时将其绝对定位覆盖在自定义按钮上，当用户点击自定义按钮时，实际上是触发了文件输入框的点击事件，从而实现文件选择功能。
2、使用JavaScript动态修改样式
另一种方法是使用JavaScript动态修改文件输入框的样式，这种方法需要我们监听文件输入框的"change"事件，当用户选择文件后，我们可以通过JavaScript将文件输入框的边框或背景颜色设置为红色。
以下是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>红色文件框</title>
<style>
.file-input {
border: 2px solid #000;
padding: 10px 20px;
cursor: pointer;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var fileInput = document.getElementById("fileInput");
fileInput.addEventListener("change", function() {
if (this.files.length > 0) {
this.style.borderColor = "red";
} else {
this.style.borderColor = "#000";
}
});
});
</script>
</head>
<body>
<input type="file" id="fileInput" class="file-input">
</body>
</html>
在这个例子中，我们为文件输入框添加了一个黑色的边框，当用户选择文件后，我们通过JavaScript监听"change"事件，并根据文件是否存在来动态修改文件输入框的边框颜色，如果存在文件，边框变为红色；否则，保持黑色。
通过以上两种方法，我们可以实现让文件输入框变红色的效果，需要注意的是，这些方法可能在不同的浏览器和操作系统上存在兼容性问题，因此在实际应用中需要进行充分的测试和调整。