Adds Input-File feature. #245
Conversation
This adds styling to hide the default Input for File Uploads and an example to the index page for targeting the now hidden File Upload button with a label element which can be styled to appear like other nes.css buttons.
| // Hides the default <input type="file"> upload button. A <label> targeting the id of the now hidden input is required. | ||
| input[type="file"] { | ||
| display: none; | ||
| } |
There was a problem hiding this comment.
Could you move input[type="file"] into buttons.scss?
Because Input-File of users who don't want to use nes-btn will be hidden.
<label class="nes-btn">
<span>Upload File</span>
<input type="file">
</label>// ./elements/buttons.scss
.nes-btn > input[type="file"] {
display: none;
}What do you think? 🤔
BcRikko
added
the
waiting - contributor
|
|
||
| // Hides the default <input type="file"> upload button. A <label> targeting the id of the now hidden input is required. | ||
| input[type="file"] { | ||
| display: none; |
There was a problem hiding this comment.
this will break the ability for keyboard users and screen readers to find this input. display: none should never be used to hide elements that are still meant to be accessible to people.
instead use something like:
opacity: 0; /* visually hides it */
position: absolute; /* to remove it from the document flow */ideally this would also have a wrapper of some sort with position: relative to ensure the file input doesn't get positioned in some random place in the DOM.
more information here:
https://scottaohara.github.io/a11y_styled_form_controls/src/file-upload/
There was a problem hiding this comment.
Thanks for your comment. 😆
How about this? 🤔
<label class="nes-btn" for="file_upload">
<span>Select your file</span>
<input type="file" id="file_upload">
</label>.nes-btn {
position: relative;
> input[type="file"] {
position: absolute;
opacity: 0;
}
}
|
🎉 This issue has been resolved in version 2.3.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
guastallaigor
removed
the
waiting - contributor
This adds styling to hide the default Input for File Uploads and an example to the index page for targeting the now hidden File Upload button with a label element which can be styled to appear like other nes.css buttons.
Description
This hides the default element. This allows the use of a element to target the id of the now hidden input which can be styled to appear like an nes.css button.
Compatibility
This feature only targets the "file" input type. File input elements used without a corresponding label element will not be visible.
Caveats
elements must include a unique id and be used with a element which targets that same id for this functionality to be effective. The label element can then be styled with the nes-btn class to appear like other nes.css buttons.