This content originally appeared on David Walsh Blog and was authored by David Walsh
We all love beautifully styled form controls but, due to the differences between operating system displays, styling them can be painful. Due to that pain, we’ve created scores of libraries to mock these controls. Unfortunately that sometimes comes at the cost of accessibility, performance, etc.
One control that has traditionally been tough to style is the input[type=file] element. Said input variation visually contains a button and text, all being clickable. Bit of a Frankenstein’s monster if you ask me. Can we style the button part though? We can!
To style the button button portion of input[type=file], you can use ::file-selector-button:
input[type=file]::file-selector-button {
border: 1px solid green;
background: lightgreen;
}
Styling this input variant wasn’t possible when it was first introduced. WebKit first started allowing styling complex form controls, and we can’t thank them enough!
The post CSS ::file-selector-button appeared first on David Walsh Blog.
This content originally appeared on David Walsh Blog and was authored by David Walsh
David Walsh | Sciencx (2023-02-20T09:50:57+00:00) CSS ::file-selector-button. Retrieved from https://www.scien.cx/2023/02/20/css-file-selector-button/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.