Stylize input type file [duplicate]

Question

Stylize input type file [duplicate]

Navigation

#1 by (4 votes)

0

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

I tried styling via css but I did not succeed. I can not think of any way to do this.

javascript html jquery css

asked by anonymous 23.03.2016 / 22:14

1 answer

Stop multiple Jquery events How do I force a text file to be downloaded? [duplicate]

score 4 · Accepted Answer

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

As div hidden, only the% custom% that will be behind input file with div will be visible, resulting in something like the example I created below and leaving input file clickable because found in front of the custom button.

Here you also 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>