Skip to content
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

Added styling to file selector button #72

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

TheDro
Copy link

@TheDro TheDro commented Aug 4, 2024

Closes #56

Purpose

Add styling to file inputs so that the "Choose File" button matches that of the other buttons in an app.

Result

Here are before and after pictures:

before
marx_before2

after
marx_after

Notes

The border around the active button could use some improvement. Currently, it gets clipped by the outer input element.

I'm not sure whether this would merit a minor or patch version update. Let me know which is most appropriate and I'll make the update.

@TheDro
Copy link
Author

TheDro commented Aug 4, 2024

Additional info: This change allows me to remove this "monkey patch" from a project I'm currently working on:

input[type=file]::file-selector-button {
    background-color: var(--primary);
    border: var(--primary);
    border-radius: var(--br);
    color: var(--white);
    padding: var(--sm-pad) var(--md-pad);
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    font-size: 1rem;
    line-height: 1.5;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
input[type=file]:hover::file-selector-button {
    background-color: var(--primary-600);
    border-color: var(--primary-600);
    color: var(--white);
}
input[type=file]:not(:disabled):active::file-selector-button {
    background-color: var(--primary-600);
    border-color: var(--primary-600);
    color: var(--white);
}
input[type=file]:focus::file-selector-button {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.5);
}
input[type=file]:disabled::file-selector-button {
    opacity: .65;
    cursor: not-allowed;
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

@TheDro
Copy link
Author

TheDro commented Aug 4, 2024

Side note: I'd like to thank the author and maintainers of this project. It's really great and I've been using it for a bunch of my personal projects for years now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Style file inputs with ::file-selector-button/::-webkit-file-upload-button
1 participant