- Create a custom button :
- Please note that the class of this button "btn" give it the standard salesforce button behaviour (on hover pointer change, on click blue border etc)
- Note that there is an additional class "Overlay" associated with the input.
Create a custom button :
<input id="CustomChooseFileButton" type="text" size="23" name="CustomChooseFileButton" value="选择文件" class="OverlayButton btn" />Please note that the class of this button "btn" give it the standard salesforce button behaviour (on hover pointer change, on click blue border etc)
Note that there is an additional class "Overlay" associated with the input.
Basically you need to put the input text and apex:inputfile in a div container
(start tag below is --> div class = "ChooseFileContainer")
<apex:inputFile fileName="CustomObjectList" value="{!filebody}" fileSize="{!filesize}" style="padding-left:65px" />
<input id="CustomChooseFileButton" type="text" size="23" name="CustomChooseFileButton" value="Upload Object Names File" class="OverlayButton btn" />
</div>
</code>
<code>
<div>
<apex:inputFile fileName="CustomObjectList" value="{!filebody}" fileSize="{!filesize}" style="padding-left:65px" />
<input id="CustomChooseFileButton" type="text" size="23" name="CustomChooseFileButton" value="Upload Object Names File" class="OverlayButton btn" />
</div>
</code>
/* Styling for the standard button */
.ChooseFileContainer {
position:relative;
display:inline;
}
/*Styling for the custom button that would overlay on top of the standard choose file button */
.OverlayButton {
position:absolute;
left:5px;
right:0;
}
<style>
/* Styling for the standard button */
.ChooseFileContainer {
position:relative;
display:inline;
}
/*Styling for the custom button that would overlay on top of the standard choose file button */
.OverlayButton {
position:absolute;
left:5px;
right:0;
}
</style>
$(function(){
// script that triggers the click of the standard
// choose file button
$('#CustomChooseFileButton').click(
function(e) {
$('input[type="file"]').click();
});
// script to hide the blinking cursor
$('input[type="text"]').mousedown(
function(e) {
e.preventDefault();
$(this).blur();
return false;
});
});
$(function(){
// script that triggers the click of the standard
// choose file button
$('#CustomChooseFileButton').click(
function(e) {
$('input[type="file"]').click();
});
// script to hide the blinking cursor
$('input[type="text"]').mousedown(
function(e) {
e.preventDefault();
$(this).blur();
return false;
});
});
