title: how to override primefaces component inline style without using !important in css?
body: <p>I am using primefaces component <code>p:selectonemenu</code> on one of my webpages. I'm trying to apply style on it using my own css (without using <code>!important</code>), 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.</p>
  
  <p>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.</p>
  
  <h3>Primefaces Code</h3>
  
  <pre><code>&lt;p:selectOneMenu value="#{Controller.property}" id="dropDown"&gt;
    &lt;f:selectItem itemLabel="Select One" itemValue="0" /&gt;
    &lt;f:selectItems value="#{controller.property}"/&gt;
  &lt;/p:selectOneMenu&gt;
  </code></pre>
  
  <h3>HTML interpreted code</h3>
  
  <pre><code>&lt;div id="j_idt40" class="ui-selectonemenu ui-widget ui-state-default 
  ui-corner-all ui-helper-clearfix" style="width: 190px;"&gt;
  </code></pre>