如何在primefaces中重新调整<p：fileupload ... =“”>按钮的大小？

Question

我在我的JSF中添加了一个 fileUpload 按钮，并希望使用css重新调整其宽度，但不使用以下方法。使用 chrome-developer-tools 检查渲染的html代码时，容器行为不够奇怪。

我的JSF截图：

元素容器大小是 1891px ，我不知道它是由我的css文件设置的。

我的CSS文件：

 ul {
      list-style: none;
}

body {
    font-family: Arial;
}

#recordingslist audio {
    display: block;
    margin-bottom: 10px;
}

.btn_style1 {
    width: 100px;
    height: 50px;
}

.text_style1 {
    font-size: x-large;
}

.text_style2 {
    font-size: medium;
    width: 20%;
}

.text_style3 {
    font-size: large;
    font-weight: bold;
    color: #007e50;
    display: block;
    width: 600px;
}

.c_style1 {
    width: 150px;
    height: 50px;
}

.ui-widget {
    font-family: Arial, sans-serif;
    font-size: 100% ! important;
}

.ui-button {
    width: 200px;
    height: 50px;
}

我的JSF代码：

<h:form id="uploadForm">
   <p:growl id="messages" showDetail="true" />
   <p:fileUpload id="uploadBtn1" value="#{fileUploadView.file}" mode="simple" skinSimple="true" style="width: 200px; height: 51px;" />
</h:form>

我还尝试根据this设置styleClass属性的style属性，但仍无效果。

有没有人有想法，我做错了什么。