5

I'm using an inputFile button to upload some files...

The button renders on my page as a grey 'Choose File To Upload' button. Can I add my own custom icon/image in place of the button?

<apex:inputFile value="{!attachment.body}" filename="{!attachment.name}" id="file"/>
9

This question is more related to CSS. You can achieve this by CSS.

Just provide you inputFile tag a class like:

<apex:inputFile value="{!attachment.body}" filename="{!attachment.name}" id="file" styleclass="fileType"/>

And apply the CSS from this link:

html {
  margin: 30px;
}
.fileType {
    display: block;
    position: relative;
    width: 200px;
    margin: auto;
    cursor: pointer;
    border: 0;
    height: 60px;
    border-radius: 5px;
    outline: 0;
}
.fileType:hover:after {
    background: #FF1111;
}
.fileType:after {
    transition: 200ms all ease;
    border-bottom: 3px solid rgba(0,0,0,.2);
    background: #000000;
    background-image:url('http://i.stack.imgur.com/CVpp3.jpg');
    text-shadow: 0 2px 0 rgba(0,0,0,.2);
    color: #fff;
    font-size: 20px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    content: 'Upload Something';
    line-height: 60px;
    border-radius: 5px;
}

Or you can play with your own CSS too and you can provide your own image url for background property of CSS.

  • Excellent! Cheers regal. Cool styles too! – Daft Apr 16 '14 at 13:31
0

Although this question is quite old, maybe you will find the following example useful (live snippet).

VF / HTML part:

<label class="custom-file-upload">
    <input type="file"/>
    Custom Upload
</label>

OR

<label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Custom Upload
</label>
<input id="file-upload" type="file"/>

CSS part:

input[type="file"] {
    display: none;
}
.custom-file-upload {
    color: #333;
    margin: 1px;
    padding: 2px 3px;
    border: 1px solid #b5b5b5;
    border-bottom-color: #7f7f7f;
    background: #e8e8e9 url(https://i.imgur.com/RdRFrhh.png) repeat-x right top;
    font-weight: bold;
    font-size: .9em;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    padding: 4px 3px;
    cursor: pointer;
}

Result:

enter image description here

I highly recommending checking this question on StackOverflow: https://stackoverflow.com/questions/572768/styling-an-input-type-file-button

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.