View in EnglishAlways switch to English

::file-selector-button

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2021年4月.

::file-selector-buttonCSS 伪元素代表type="file" 的<input> 的按钮。

尝试一下

input {  margin-top: 1rem;}input::file-selector-button {  font-weight: bold;  color: dodgerblue;  padding: 0.5em;  border: thin solid grey;  border-radius: 3px;}

<label for="avatar">Choose a profile picture:</label><br /><input type="file" name="avatar" accept="image/png, image/jpeg" />

语法

css

selector::file-selector-button

示例

基本示例

HTML

html

<form>  <label for="fileUpload">Upload file</label>  <input type="file" /></form>

CSS

form {  display: flex;  gap: 1em;  align-items: center;}

css

input[type="file"]::file-selector-button {  border: 2px solid #6c5ce7;  padding: 0.2em 0.4em;  border-radius: 0.2em;  background-color: #a29bfe;  transition: 1s;}input[type="file"]::file-selector-button:hover {  background-color: #81ecec;  border: 2px solid #00cec9;}

结果

请注意::file-selector-button 是一个完整元素，因此与 UA 样式表中的规则相匹配。特别是，字体和颜色不一定会从input 元素继承。

回退示例

HTML

html

<form>  <label for="fileUpload">Upload file</label>  <input type="file" /></form>

CSS

form {  display: flex;  gap: 1em;  align-items: center;}

css

input[type="file"]::file-selector-button {  border: 2px solid #6c5ce7;  padding: 0.2em 0.4em;  border-radius: 0.2em;  background-color: #a29bfe;  transition: 1s;}input[type="file"]::-ms-browse:hover {  background-color: #81ecec;  border: 2px solid #00cec9;}input[type="file"]::-webkit-file-upload-button:hover {  background-color: #81ecec;  border: 2px solid #00cec9;}input[type="file"]::file-selector-button:hover {  background-color: #81ecec;  border: 2px solid #00cec9;}