Materialize: webkit: file upload button not completely cursor pointer

Created on 18 Aug 2015 · 7Comments · Source: Dogfalo/materialize

Check with chrome on materializecss.com/forms.html, hover mouse over file upload button. Only the bottom area of the button shows the pointer cursor, the text overlays the button at the top.

To fix this, add this:

.file-field input[type=file]::-webkit-file-upload-button {
  display: none;
}

browser-bug

Source

fabyeah

👍2

Most helpful comment

Please test the following code

.file-field input[type=file]  {
    text-indent: -999px;
}

.file-field .btn, .file-field .btn-large {
    position: relative;
    overflow: hidden;
}

DanielRuf on 6 Apr 2017

👍2

All 7 comments

Great tip @fabyeah, thank you ;-)

adriendlph on 5 Feb 2016

Still not fixed.

Here is the video demo - https://share.viewedit.com/aDEkxpHY27Yn3E5K9a6xCc

kmmbvnr on 24 Nov 2016

Please test the following code

.file-field input[type=file]  {
    text-indent: -999px;
}

.file-field .btn, .file-field .btn-large {
    position: relative;
    overflow: hidden;
}

DanielRuf on 6 Apr 2017

👍2

@kmmbvnr I can't spot the issue

tomscholz on 10 Apr 2017

@tomscholz inspect the file input element, its size and how the cursor changes when moving the mouse over it. Same in Chrome.

DanielRuf on 10 Apr 2017

Added in 494df27b

Dogfalo on 20 Jul 2017

input[type='file']{
opacity: 0;
cursor: pointer;
width: 24px;
height: 24px;
font-size: 0;
position: absolute;
}

cursor:pointer does not work on input file just because of the default button. No special reason here. You need to remove its appearance via this code, pay attention with font-size:0.

It works perfectly on Chrome, Firefox and IE for me. I hope, this will also help you.