change the width of the <p:selectOneMenu>

Question

I have a slectOnMenu component I am trying to Change the width of slectOnMenu by setting the width:120% !important; in the style after overridering .ui-selectonemenu, ui-selectonemenu- but I am getting just the Label changed how can I move the trigger too? I want to change the selectOneMenu width like the white area below.

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>

screenshot

Answer 1

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

Just be aware that making a width bigger then 100% can mess up your layout. I have never ever used one bigger then 100%!. If you meant pixels use

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

To be more responsive-save use em instead of px:

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