::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 April 2021.
Das ::file-selector-button
CSS Pseudoelement repräsentiert die Schaltfläche eines <input>
mit type="file"
.
Probieren Sie es aus
Syntax
css
selector::file-selector-button
Beispiele
Einfaches Beispiel
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;
}
Ergebnis
Beachten Sie, dass ::file-selector-button
ein ganzes Element ist und als solches den Regeln des UA-Stylesheets entspricht. Insbesondere werden Schriftarten und Farben nicht unbedingt vom input
-Element geerbt.
Fallback-Beispiel
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;
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Pseudo-Elements Module Level 4 # file-selector-button-pseudo |
Browser-Kompatibilität
BCD tables only load in the browser