how to override primefaces component inline style without using !important in css?

Question

I am using primefaces component p:selectonemenu on one of my webpages. I'm trying to apply style on it using my own css (without using !important), but it's not taking the styles from my own external css file. It's taking some inline style from somewhere, but I don't want that component to have that inline style. I want it to use style from my own external css file.

I am not getting from where this inline style is coming. Is this coming from any javascript? I need help here, below is my code.

Primefaces Code

<p:selectOneMenu value="#{Controller.property}" id="dropDown">
  <f:selectItem itemLabel="Select One" itemValue="0" />
  <f:selectItems value="#{controller.property}"/>
</p:selectOneMenu>

HTML interpreted code

<div id="j_idt40" class="ui-selectonemenu ui-widget ui-state-default 
ui-corner-all ui-helper-clearfix" style="width: 190px;">

Answer 1

Is this coming from any javascript?

That's correct. This inline style is been set by PrimeFaces.widget.SelectOneMenu.initWidths in primefaces.js.

The only way to override this without !important is to specify the inline style yourself.

<p:selectOneMenu ... style="width: 500px">

You could also override the PrimeFaces.widget.SelectOneMenu.initWidths with a custom JS file, but this would affect all <p:selectOneMenu> components.