function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Sander | SSC-RecruitmentSander | SSC-Recruitment 

inputfile style button

Hi! 

I am very new to Visualforce and Apex and have recently created a VisualForce form to replace web-to-case and enable attachment uploading. It all seems to work, but I have no idea how to add style to the button. Any suggestions on that maybe?

User-added imageUser-added image
Best Answer chosen by Sander | SSC-Recruitment
Neha AggrawalNeha Aggrawal
Hi Sander,

You can style your button like this:
  
<apex:commandButton value="Save"  styleClass="buttonStyle" style="background:grey;padding:4px; text-decoration: none; border-color:red;"/>

Thanks.

All Answers

Neha AggrawalNeha Aggrawal
Hi Sander,

You can style your button like this:
  
<apex:commandButton value="Save"  styleClass="buttonStyle" style="background:grey;padding:4px; text-decoration: none; border-color:red;"/>

Thanks.
This was selected as the best answer
Sander | SSC-RecruitmentSander | SSC-Recruitment
Thanks, works like a charm now! The trick is in the styleClass part.....that works also on resulting buttons from apex:inputfile...
Pawel-GumielaPawel-Gumiela
Although this question is quite old, maybe you will find the following example useful (live snippet (http://jsfiddle.net/x6mfob31/1/))

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:
User-added image

My original answer on Salesforce Stack Exchange can be found here (https://salesforce.stackexchange.com/a/271292/28500).