-
-
Notifications
You must be signed in to change notification settings - Fork 1.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Adds Input-File feature. #245
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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? 🤔
|
||
// 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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🎉 This issue has been resolved in version 2.3.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
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.