File selector can be styled

[Asmatzaile]

MDN URL

https://developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling

What specific section or headline is this issue about?

File input types

What information was incorrect, unhelpful, or incomplete?

"The only problem with file pickers is that the button provided that you press to open the file picker is completely unstylable — it can't be sized or colored, and it won't even accept a different font."

What did you expect to see?

It is true that the button is unstylable -but there is a pseudoelement, ::file-selector-button, that lets us style it.

Do you have any supporting links, references, or citations?

https://developer.mozilla.org/en-US/docs/Web/CSS/::file-selector-button

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/learn/forms/advanced_form_styling
• MDN URL: https://developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/learn/forms/advanced_form_styling/index.md
• Last commit: 7297541
• Document last modified: 2024-09-10T12:17:19.000Z

[Asmatzaile]

https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms has thus also incorrect information. Should <input type="file"> be moved out of the "Having internals can't be styled in CSS alone" section to the "Harder-to-style" section; and in the original page linked in the issue, moved from 'the ugly' to 'the bad'?

I will wait for some community feedback before opening a PR :)