使用css选择文件后，如何更改表单中文件输入按钮的颜色？

Question

我正在制作一个简单的网页，其中包含一个包含类型文件输入的表单，我想在 select a 时更改“select 文件”按钮的边框颜色file 表示文件是 selected.

我曾尝试在 css 中使用 :focus 伪 class 来尝试在按下时更改颜色，但这仅在单击页面上的其他内容之前有效。我也尝试了 :visited 伪 class，但没有任何反应。

这里是相关的html代码：

<input type="file" id="file-input"></input>
<label for="file-input" class="file-button">Select File</label>

css:

.file-button {
    display: block;
    margin: 10px auto;
    width: 400px;
    border-radius: 10px;
    text-align: center;
    justify-content: center;
    color: black;
    font-weight: bold;
    font-size: 36pt;
    border: 5px solid grey;
    padding:8px 0px;

}

input[type="file"]{
    opacity: 0;
    width: 0.1px;
    height: 0.1px;
    overflow: hidden;
    z-index: -1;
    position: absolute;

}

input[type="file"]:focus+label {
    border-color: black;  
}

Answer 1

有几种方法可以做到这一点。如果你有完整的js代码，那么回答起来会容易得多。基本上你可以使用三元来确定文件是否已上传（存储在状态中），然后根据此类更改 css。

例如：

const [isUploaded, setIsUploaded] = useState(null)

//Change the upload to true once a file is selected

<label for="file-input" class={isUploaded ? "file-button-after-upload" : "file-button-before-upload">Select File</label>

使用css选择文件后，如何更改表单中文件输入按钮的颜色？

How to change the color of the file input button in a form after a file is selected with css?

html

css

forms

pseudo-class