// DEFINE FORM  
$formname = "example1";  
$FORM->setup($formname, "#buttons");  
$FORM->buffer('<p class="intro">Setting up custom buttons using CSS only</p>');  
$FORM->radio("radio", array("radio1" => "Option1", "radio2" => "Option2"));  
$FORM->check("check1", "Checkbox1");  
$FORM->check("check2", "Checkbox2");  
$FORM->submit("Send");  
$FORM->close();  
$FORM->display($formname); 
 
// SET CSS TO CUSTOMIZE BUTTONS 
$PAGE->style(' 
 
/* required styling */ 
#example1 .opt_input {display:none;} 
#example1 .opt_input + label.lbl_adapt {display:inline-block; padding:0; width:30px; height:30px; background: url("' .$PAGE->directory(). 'img/btn_checkbox.png") no-repeat 0 0;} 
#example1 .opt_input:checked + label.lbl_adapt {background-position:0 -30px;} 
 
/* optional styling */ 
#example1 .opt_input {line-height:30px; padding-left:10px;} 
#example1 .lbl_input {padding-left:10px;} 
#example1 .div_outer.submit {float:left; width:100%; text-align:center; margin-top:20px;} 
#example1 .btn_input.submit {padding:5px 20px;} 
 
');

// DEFINE FORM   
$formname = "example2";   
$FORM->setup($formname, "#upload");   
$FORM->buffer('<p class="intro">Example: Custom upload button</p>'); 
$value = $FORM->values($formname, "image"); 
$FORM->upload("image", ($value? $value: "Upload file"), "data/temp/", array("jpg"));   
$FORM->close(); 
$FORM->display($formname);  
  
// SET CSS TO CUSTOMIZE BUTTONS  
$PAGE->style('  
  
/* required styling */  
#example2 .div_upload input {display:none;} 
#example2 .div_upload label {background:#353535; color:#fff; padding:0 40px; height:30px; width:auto; border-radius:3px; line-height:30px; text-align:center;}  
 
/* optional styling */  
#example2 .frm_upload p {float:left; width:100%;} 
#example2 .div_upload {float:left; margin-bottom:10px;} 
 
'); 
 
// JQUERY CODE TO SET FILENAME 
$PAGE->script(' 
 
$(function(){ 
    $("input").change(function(){ 
 
        var file_name = $(this).val(); 
        var show_name = file_name.replace(/^.*[\/]/, ""); 
        var show_file = show_name.length <= 25; 
        var show_text = show_file? show_name: "filename too long!"; 
        var show_span = $(this).parent().find("span"); 
        show_span.html(show_text); 
 
        if(show_file){show_span.removeClass("alert");}else{show_span.addClass("alert");} 
    }); 
}); 
 
');