更改<p：selectonemenu>的宽度

Question

我有一个slectOnMenu组件我试图通过在覆盖width:120% !important;之后设置样式中的.ui-selectonemenu, ui-selectonemenu-来更改slectOnMenu的宽度但是我只是更改了Label，我怎么能移动触发器？我想改变selectOneMenu宽度，如下面的白色区域。

CSS

              <h:form id="rqScannerForm">
                 <style type="text/css">
                    .ui-selectonemenu{width: 120% !important;} 
                    .ui-selectonemenu-label{width: 120% !important;}
                 </style>
                  <p:selectOneMenu  style="width: 120% !important;}" scrollHeight="150" 
                  value="#{viewEventStatusController.eventStatusId}"  disabled="#{!eventStatusController.isEntityEditable}" autoWidth="false" >
                  <f:selectItems value="#{viewEventStatusController.eventStatusList}" var="eventStatus" itemValue="#{eventStatus.id}" itemLabel="#{eventStatus.objectId}" />
                  </p:selectOneMenu>
              </h:form>

截图

Answer 1

.ui-selectonemenu {
    min-width: 50% !important;
}

请注意，将宽度设置为100％可能会使布局陷入困境。我从来没有使用过比100％更大的！如果你的意思是像素使用

.ui-selectonemenu {
    min-width: 120px !important;
}

要提高响应速度，请使用em代替px：

.ui-selectonemenu {
    min-width: 8em !important;
}