Primefaces FileUpload - 簡單的引導樣式？

我已經實現文件上傳控制器上我* .xhtml + PF 3.5頁：Primefaces FileUpload - 簡單的引導樣式？

 <div class="control-group"> 
     <h:form enctype="multipart/form-data"> 

      <p:messages showDetail="true" /> 

      <p:fileUpload value="#{fileUploadController.file}" mode="simple" /> 

      <p:commandButton value="Submit" ajax="false" 
       actionListener="#{fileUploadController.upload}" /> 

     </h:form> 
    </div>

我不使用任何風格的上傳，但是，此刻，它看起來像：

enter image description here

我想讓它看起來像PF頁上：

File Uploader

我必須改變什麼？我真的很感謝你的回答！

來源

2013-04-23 maximus

Chrome中的顯示與Firefox不同，所以你的意思是'像PF'頁面？ – 2013-04-23 13:54:38

Thx爲您的答案！我的意思是像PF頁面（鏈接：http：//www.primefaces.org/showcase/ui/fileUploadSimple.jsf），當你改變你的THEME爲Bootstrap。 – maximus 2013-04-23 13:55:57

@maximus將主題改爲Bootstrap不會改變''的樣子。我錯過了什麼嗎？ – 2013-04-23 14:32:54

如果要定製filupload按鈕，我不建議使用<p:fileUpload mode="simple"/>。給像background-color或其他人會發生奇怪的外觀&感覺。

而不是它，你可以使用<p:fileUpload mode="advance"/>並修改它的任何東西，.ui-fileupload .fileinput-button類提供了改變按鈕的CSS，.fileupload-content使得容易操縱內容的CSS。例如：

.fileupload-buttonbar { 
    background: transparent none; 
    border: none; 
} 

.fileupload-content { 
    display: none; 
} 

.ui-fileupload .fileinput-button { 
    background-color: rgba(142, 103, 64, 0.98); 
}

生成這樣一個文件的上傳按鈕：

enter image description here

來源

2013-04-23 14:50:39

奧馬爾法魯克Almalı的回答更新的primefaces 5同胞的Google誰發現這個線程：

.ui-fileupload-buttonbar { 
    background: transparent none; 
    border: none; 
} 

.ui-fileupload-content { 
    display: none; 
} 

.ui-fileupload-buttonbar .ui-fileupload-choose { 
    background-color: rgba(142, 103, 64, 0.98); 
}

來源

2014-07-10 12:54:51 adam0404

Primefaces FileUpload - 簡單的引導樣式？

回答

相關問題