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 偽元素簡單用法的例子。

<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>

列印頁面