CODEWITHSUNDEEP
htmlcssinputimage-uploading
Jonathan Davies
Jonathan Davies

Reputation: 884

Remove input file button and style the files chosen

I am trying to create an upload form which takes multiple images. I want to be able to remove the "Choose Files" button but keep the "No file chosen" to inform the user what files they are going to be uploading.

I understand that I can set the opacity to 0 on the input type file styling, but this removes both the "Choose Files" and "No file chosen" text.

Here is the codepen of the image uploader so far.

To summarise:

Here is the HTML:

<div class="upload">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>Would you like to <span style='color: lightgreen;'>Upload</span> or <span style='color: orangered;'>Delete</span> a file?</h1>
                <div style="position: relative; height: 275px;">
                    <form action="" method="post" enctype="multipart/form-data" class="formUp">

                        <input type="file" name="fileToUpload[]" id="fileToUpload" accept="image/*" multiple="multiple"><p>Click here to upload images.</p></input>
                        <input type="submit" value="Upload Images" name="submitUpload" />
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

Here is the CSS:

.up {
    border: none;
}

.upload {
    padding-top: 6%;
}

.upload input[type='file'] {
    outline: none;

    width: 100%;
    height: 100%;
    position: absolute;
}

.formUp {
    border: 4px dashed black;
    width: 400px;
    height: 200px;
    position: absolute;
}

.formUp p {
    text-align: center;
    width: 100%;
    height: 100%;
    line-height: 170px;
    font-weight: bold;
    font-size: 1.5em;
}

.upload input[type='submit'] {
    margin-top: 2%;
    width: 100%;
    height: 20%;
}

.upload input[type='submit'] {
  background: #0AC986;
  dispaly: inline-block;
  width: 100%;
  font-size: 16px;
  height: 50px;
  color: #fff;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

.upload input[type='submit']:hover {
    color: #F37272; 
    background-color: palegreen;
}

.upload input[type='submit'] {
    -o-transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -ms-transition: all .3s;
}

.upload input[type='submit']:hover {
    color: red;
}

Upvotes: 4

Views: 13518

Answers (2)

camslice
camslice

Reputation: 635

The text-indent property will manipulate the position of the Choose Files button but leave the No file chosen text.


    .upload input[type='file']
    {
        text-indent: -999em;
        outline: none;
        width: 100%;
        height: 100%;
        position: absolute;
    }

Upvotes: 3

Nanang Mahdaen El-Agung
Nanang Mahdaen El-Agung

Reputation: 1434

AFAIK, we can't do much thing to style input file. What we can do is using opacity and appearance trick and makes the input file covering parent element, so user still receive the click event of the input file.

Also you need to use javascript/jQuery to handle what you need. If using javascript/jQuery is not problem for you, below the sample implementation to your [Codepen][1].

[1]: http://codepen.io/mahdaen/pen/Ejwodb

Upvotes: 2

Related Questions