rrvw3w
Last Updated: February 25, 2016
·
3.018K
· adelonzeta
Adelon

Customizing input file in html forms

Preview:
Picture

The Markup:

<span class="customInputFile">
    <a href="javascript:void(0)">Choose an image in your computer.</a>
    <input type="file" />
</span>

The CSS:

.customInputFile input[type="file"] {
    display: none;
}
.customInputFile a {
    background: #fff;
    border: 1px dashed rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    display: block;
    padding: 8px 0;
    text-align: center;
}

The JQuery:

$('.customInputFile a').on("click", function() {
    $(this).next('input[type="file"]').click();
});
Say Thanks
Respond

2 Responses
Add your response

1422

Do you have a link to see this in action?

over 1 year ago ·
1440
Adelon

@cseckler , yeah it's on fundmytravel.com. You need first to create a campaign before you can view this on the user-admin though. :D

over 1 year ago ·