# CSS: Unknown pseudo-element or pseudo-class “::file-selector-button”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-unknown-pseudo-element-or-pseudo-class-file-selector-button
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `::file-selector-button` pseudo-element targets the button inside an `<input type="file">` element — the part users click to open the file picker dialog. It is supported in all major modern browsers and is part of the [CSS Pseudo-Elements Level 4](https://drafts.csswg.org/css-pseudo-4/#file-selector-button-pseudo) specification.

The W3C CSS Validator has not yet been updated to recognize `::file-selector-button`, which causes it to flag the pseudo-element as invalid. This is a known bug that has been [reported on GitHub](https://github.com/validator/validator/issues/1209). Because the validator's CSS grammar definitions lag behind the living standards, certain newer — but fully standardized — features trigger false positives.

Before `::file-selector-button` was standardized, browsers used vendor-prefixed versions like `::-webkit-file-upload-button` and `::-ms-browse`. The unprefixed `::file-selector-button` replaced these and is now the recommended approach.

## What you should do

Since this is a validator limitation rather than an actual code issue, you can safely ignore this warning. Your CSS is standards-compliant. If you want to suppress the warning in a CI/CD pipeline or validation report, you can add a comment noting the false positive, but **do not remove or change the pseudo-element** — it is correct.

## Browser support

`::file-selector-button` is supported in Chrome 89+, Firefox 82+, Safari 14.1+, and Edge 89+. For older browsers, you may include the vendor-prefixed versions as fallbacks, though these will also trigger validator warnings.

## Examples

### CSS that triggers the validator warning

```css
::file-selector-button {
  background-color: #4a90d9;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}
```

This CSS is **valid and correct** despite the validator warning. It styles the file selector button with a custom background color, text color, and border radius.

### Scoping to a specific input

```css
input[type="file"]::file-selector-button {
  background-color: #4a90d9;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
}

input[type="file"]::file-selector-button:hover {
  background-color: #357abd;
}
```

### Including vendor-prefixed fallbacks for older browsers

```css
input[type="file"]::-webkit-file-upload-button {
  background-color: #4a90d9;
  color: white;
  border: none;
  padding: 8px 16px;
}

input[type="file"]::file-selector-button {
  background-color: #4a90d9;
  color: white;
  border: none;
  padding: 8px 16px;
}
```

The vendor-prefixed version is placed first so that the standard `::file-selector-button` rule takes precedence in browsers that support both. Note that the vendor-prefixed versions will also trigger validator warnings for the same reason.

### Corresponding HTML

```html
<label for="upload">Choose a file:</label>
<input type="file" id="upload" name="upload">
```

There is nothing to fix in your HTML or CSS. This is purely a validator false positive that will be resolved when the W3C Validator updates its CSS grammar definitions.