CSS 伪元素 ::file-selector-button

::file-selector-button 伪元素是 type="file" 的 <input> 按钮的表示。它基本上会在单击按钮时打开文件选择弹出窗口。

由于伪元素 ::file-selector-button 本身就是一个完整的元素，因此字体和颜色可能不会从<input>元素继承。

语法

input[type="file"]::file-selector-button {
   /* ... */
}

CSS ::file-selector-button 示例

下面是一个示例，显示的简单用法: :file-selector-button 伪元素:

<html> 
<head>
<style>
    body {
        display: block;
        height: 100vh;
        margin: 0;
        }

    input::file-selector-button {
        background-image:url(/css/images/border.png);
        background-size: 200%;
        border: 2px solid black;
        border-radius: 8px;
        font-weight: 600;
        color: rgb(6, 1, 9);
        padding: 15px;
        transition: all 0.25s;
    }
</style>
</head>
<body>
    <h2>选择一个文件看看效果</h2>
    <input type="file">
</body>
</html>