Style input type file

Question

Is there any way to style an input type file and leave it like this?

I tried styling via css but I didn’t succeed. I can’t think of any way to do this.

Answer 1

The trick is to do the input file invisible, with opacity: 0 !important; and behind it to create a button div custom/stylized the way we want the button to look (in this case we will try to create something like in your image example) that will give the look to this file selection box.

Like the input file hidden, only the div customized that will be behind the input file with a position:absolute; will be visible, resulting in something like the example I created below and leaving the input file clickable as it lies in front of the custom button.

Here you have a example in jsFiddle if you prefer.

.formWrapper {
    border: 3px solid #C2B2B3;
    display: inline-block;
}
div.upload {
    width: 200px;
    height: 57px;
    overflow: hidden;
    position: relative;
    background-color: #F3F1E9;
    float: left;
}

div.upload input {
    display: block !important;
    width: 200px !important;
    height: 57px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    cursor: text;
}
.upload user agent stylesheetdiv input[type="button"], .upload input[type="submit"], .upload input[type="reset"], .upload input[type="file"]::-webkit-file-upload-button, .upload button {
    cursor: text !important;
    /* Correção para Botáo Fantasma - forçar cursor:text */
}

.inputFileOverlay {
    position: absolute;
    width: 100%;
    color: #7B5368;
    font-family: sans-serif;
    font-weight: bold;
    line-height: 57px;
    text-align: center;
}

.formWrapper input.enviar {
    float: left;
    height: 57px;
    background-color: #7B5368;
    color: #fff;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 15px;
    border: 0;
    padding: 0 17px;
    cursor: pointer;
}

<form action="" method="post" enctype="multipart/form-data">
    <div class="formWrapper">
        <div class="upload">
            <div class="inputFileOverlay">Selecione o arquivo</div>
            <input type="file" name="upload"/>
        </div>
        <input class="enviar" type="submit" value="Enviar →">
    </div>
</form>