如何解决css选中文件后,如何更改表单中文件输入按钮的颜色?
我正在制作一个简单的网页,其中包含输入类型文件的表单,我想在选择文件时更改“选择文件”按钮的边框颜色以指示选择了文件。
我曾尝试在 css 中使用 :focus 伪类来尝试在按下时更改颜色,但这仅在单击页面上的其他内容时才有效。我也试过 :visited 伪类,但什么也没发生。
这是相关的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;
}
解决方法
有几种方法可以做到这一点。如果您有完整的 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。