-webkit-file-upload-button css implementation for firefox

Question

I have css implementation for <input type="file"> which styles the button and this is my code:

::-webkit-file-upload-button {
            cursor: pointer;
            margin-top: 25px;
            display: inline-block;
            padding: 6px;
            padding-right: 29px;
            padding-left: 29px;
            transition: all 1s ease;
            color: @darkGray;
            text-transform: capitalize;
            font-size: 15px;
            z-index: 1;
            position: relative;
            border-radius: 25px;
            background-color: transparent;
            border: 2px solid @red;
}

But this only works on Chrome and I would like to know how would I do it for other browsers?

Emilio Cobos Álvarez · Accepted Answer · 2020-12-26 19:15:07Z

5

There's a standard ::file-selector-button pseudo-element now, see https://github.com/w3c/csswg-drafts/issues/5049. Firefox supports it, and future versions of Safari and Chrome will too.

answered Dec 26, 2020 at 19:15

Emilio Cobos Álvarez

6187 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Guilherme Samuel Over a year ago

tested this and worked as the browse button turned hidden input::file-selector-button { visibility: hidden; }

Friedrich -- Слава Україні Over a year ago

developer.mozilla.org/en-US/docs/Web/CSS/::file-selector-button is supported since firefox 82.

Alex Sokol · Accepted Answer · 2015-06-30 07:06:21Z

0

Here is how you can implement custom styling for the "file" input type: https://css-tricks.com/snippets/css/custom-file-input-styling-webkitblink/

answered Jun 30, 2015 at 7:06

Alex Sokol

1248 bronze badges

Comments

scoudert · Accepted Answer · 2019-01-31 17:57:44Z

Most people tell you to completely do away with the button stuff and use another button to engage the click(); function on the file chooser.

But that may soon be outdated wizardry, as you found out. The equivalent of what you are doing on IE (v10 and above) starts this way:

input[type="file"]::-ms-browse {
    background-color: #ffffff00;
    margin: 0px;
    padding: 0px;
    border: 0px;
}

input[type="file"]::-webkit-file-upload-button {
    background-color: #ffffff00;
    margin: 0px;
    padding: 0px;
    border: 0px;
}

<input type="file"/>

There are two most important reasons why you should continue to go with your direction

Less hackery, why make it hard if you can do it simpler nowadays?
On Chrome and FF, the file chooser becomes automatically a drop target, that adds huge usability value.

Now I am still researching how I can make the button 3d shading go away, so I can make the button invisible and leave only the simple drop target field.

Dinesh · Accepted Answer · 2015-06-30 07:19:39Z

-2

Styling file inputs is notoriously difficult, as most browsers will not change the appearance from either css or javascript.

You can pass through click events from labels and style the label in whichever way you want.

<label id="add-computer-button" for="fileupload">Add from computer

<input id="fileupload" type="file" multiple="multiple" name="_photos" accept="image/*" style="visibility: hidden">

Here is the demo: https://jsfiddle.net/dinesh_feder/jww69rnf/

answered Jun 30, 2015 at 7:19

Dinesh

122 bronze badges

Collectives™ on Stack Overflow

-webkit-file-upload-button css implementation for firefox

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related