How do I properly style a 'file' button with an image, so that it is seen clean and nice in all browsers and no overlapping text from the default control is there?
Thank you!
3 Answers
The way it's usually done is by making the file input element 100% transparent with the css opacity property and putting a pretty button behind it. That way the file field still receives the click, but the look of the underlying element can be styled and scripted any way you want.
1 Comment
vlevsha
Is it necessary for me to use JavaScript or HTML and CSS would be sufficient?
File buttons are a major headache. I personally would use http://swfupload.org/
I like this KISS approach, as usual. This worked for me in chrome and firefox.
HTML:
<div class="form-group">
<label>Cover Image:</label>
<div id="uploadLabelDiv" class="fade">
<p>Change cover image</p>
<label for="upload">
<img [src]="project.cover" class="img-responsive" id="coverImage" />
</label>
</div>
</div>
<input type="file" id="upload" (change)="fileuploaded($event)" style="visibility:hidden;" />
CSS:
#uploadLabelDiv {
position: relative;
max-width: 400px;
background: transparent;
color: #fff;
transition: all 0.3s;
}
.fade {
opacity: 1;
}
.fade:hover > label {
opacity: 0.4;
}
.fade > p {
opacity: 0;
transition: none;
}
.fade:hover > p {
opacity: 1;
transition: all 0.3s;
}
p {
position: absolute;
top: calc(50% - 30px);
left: calc(50% - 60px);
color: black;
font: bold;
}
Missing classes are bootstrap.
Comments
