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

打印本页