样式 Primefaces 文件上传按钮

Question

我正在尝试将 Primefaces fileUpload 控件风格化，使其看起来像一个普通的命令按钮。我已经和你在屏幕截图中看到的一样接近了，但我无法让标记为 "Load" 的按钮与其他按钮对齐。我用红色箭头标记了我的屏幕截图，显示按钮需要向上移动几个像素。

这是我的 CSS 和 xhtml 让我走到这一步。我尝试了各种偏差，但没有成功。

.ui-fileupload-buttonbar {
    margin: 0px 0px 0px 0px !important;
    padding: 0px 0px 0px 0px !important;
    border: 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;  
}


<p:toolbar>
    <f:facet name="left">

        <p:commandButton ajax="false" value="Save" icon="ui-icon-disk">
            <p:fileDownload value="#{calculator.file}" />
        </p:commandButton>

        <p:fileUpload fileUploadListener="#{calculator.handleFileUpload}"
            label="Load" mode="advanced" update="@all" auto="true"
            sizeLimit="100000" allowTypes="/(\.|\/)(txt)$/" />

        <p:commandButton ajax="false" value="MS Word"
            icon="ui-icon-document" action="#{calculator.Poi()}" />
etc...

Answer 1

使您的 css 选择器比现在实际应用样式的选择器更具体。例如。向按钮添加一个 id 属性并在选择器中使用它（结合你已经拥有的 class 甚至 more specific）

Answer 2

答案更简单...

.ui-fileupload-buttonbar .ui-button {
    top: -1px;
}

在许多情况下，上面的答案 是相关的（这是为了......应该避免！important，这可以通过应用更具体的 css 选择器）

样式 Primefaces 文件上传按钮

Style Primefaces fileupload button

css

primefaces