Hide the browse button on a input type=file

Question

Is there a way to hide the browse button and only leave the text box that works in all browsers?

I have tried setting the margins but they show up different in each

Answer 1

Oddly enough, this works for me (when I place inside a button tag).

.button {
    position: relative;

    input[type=file] {
            color: transparent;
            background-color: transparent;
            position: absolute;
            left: 0;
            width: 100%;
            height: 100%;
            top: 0;
            opacity: 0;
            z-index: 100;
        }
}

Only tested in Chrome (macOS Sierra).