CSS - 伪元素 - ::file-selector-button

::file-selector-button 伪元素是 <input> 元素（type="file"）按钮的表示形式。点击此按钮，它基本上会打开文件选择弹出窗口。

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

语法

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

CSS ::file-selector-button 示例

这是一个展示 ::file-selector-button 伪元素简单用法的例子。

Open Compiler

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

    input::file-selector-button {
        background-image:url(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>Select a file</h2>
    <input type="file">
</body>
</html>

打印页面