::file-selector-button

::file-selector-button CSS 伪元素 表示 <input> 的按钮 type="file".

试一试

语法

css
selector::file-selector-button

示例

基本示例

HTML

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

CSS

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" id="fileUpload" />
</form>

CSS

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

结果

规范

规范
CSS 伪元素模块级别 4
# file-selector-button-pseudo

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅