樣式p：fileUpload按鈕大小

Question

我想使PrimeFaces文件加載按鈕比默認按鈕小，並且我想調整按鈕的位置。 這是xhtml文件。

    <?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:p="http://primefaces.org/ui">
<h:head>
    <title></title>

    <style>
.ui-fileupload-buttonbar .ui-icon {

    margin: 0px 0px 0px 0px !important;
    padding: 0px 0px 0px 0px !important;
    border: none;

    visibility: hidden !important;
}

.ui-button-text-icon-left .ui-button-text {
  font-size: 0.5em;
  color: #339966;  
}
/* Icon */
.ui-button-text-icon-left .ui-icon {
  display: none;
}
.ui-fileupload {
    margin: 0px 0px 0px 0px !important;
    padding: 0px 0px 0px 0px !important;
    display: inline-block;
    border: none;
}
.ui-fileupload-content {
    display: none;
}
</style>

</h:head>
<h:body>

    <h:form>
        <p:fileUpload fileUploadListener="#{fileUploadView.handleFileUpload}"
            mode="advance" dragDropSupport="false" multiple="true"
            update="messages" sizeLimit="100000" fileLimit="3"
            allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />

        <p:growl id="messages" showDetail="true" />
    </h:form>
</h:body>
</html>

我當前的按鈕已附加。 如何擺脫盒子的外層？ 以及如何調整“選擇”和“上載”之間的距離？

Answer 1

提案

我使用了以下CSS：

/* hide the icons in the file upload button bar */
.ui-fileupload-buttonbar .ui-icon {
    display: none;
}

/* adjust the padding of all buttons inside the file upload button bar */
.ui-fileupload-buttonbar .ui-button-text-icon-left .ui-button-text {
    font-size: 0.8em;
    padding: 0 0.2em;
}

/* unstyle the file upload button bar background */
.ui-fileupload-buttonbar.ui-widget-header {
    background-color: transparent;
    border: 0 none;
}

/* increase fileupload button spacing between 'choose' and 'upload' */
.ui-fileupload-buttonbar .ui-fileupload-choose {
    margin-right: 10em;
}

/* remove the border of file upload content list */
.ui-fileupload-content {
    border: 0 none;
}

說明

visibility:hidden; 不刪除覆蓋的空間， display:none; 確實
大的填充來自.ui-button-text-icon-left .ui-button-text ，因此我們將其覆蓋
一般經驗法則：盡量避免!important而是找到更具體的CSS選擇器
Firefox和Chrome等瀏覽器可讓您按F12來檢查頁面的源代碼，並實時預覽對html或css內容所做的任何更改

結果

Answer 2

我假設這是您指的按鈕： http : //www.primefaces.org/showcase/ui/file/upload/basic.xhtml

如果是這樣，則您的選擇僅限於縮小字體，減少填充和/或刪除圖標。

例如：

/* Button */
.ui-button-text-icon-left .ui-button-text {
  font-size: 0.8em;
  padding: 0.2em;
}

/* Icon */
.ui-button-text-icon-left .ui-icon {
  display: none;
}

關於注釋中的其他問題，您可以使用以下方法刪除包含的樣式：

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

您可以在“選擇”按鈕之后添加一些邊距：

.ui-fileupload-choose.ui-button {
  margin-right: 40px;
}

樣式p：fileUpload按鈕大小

問題描述

2 個解決方案

解決方案1
2 已采納 2016-02-12 20:18:50

解決方案2
1 2016-02-12 20:10:07

樣式p：fileUpload按鈕大小

問題描述

2 個解決方案

解決方案1 2 已采納 2016-02-12 20:18:50

解決方案2 1 2016-02-12 20:10:07

解決方案1
2 已采納 2016-02-12 20:18:50

解決方案2
1 2016-02-12 20:10:07