Skip to content

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