Change rich:select 's width

I suppose there are some people like me, had puzzled with rich:selec's width setting for long time.

I just solved it and share the way with you all.

We don't need to create a class of css, let's just override the existing class of rich:select in a new css file named select.css in resources folder.

input.rf-sel-inp {

          width: 100px;

}

 

.rf-sel-btn-arrow {

          width: 15px;

}

 

Then, let's add this css file to the page on the top of body inner and one line jquery script to change the css style.

 

<h:body>

     <h:outputStylesheet name="select.css" library="css" />

...

     <script>

          jQuery('.rf-sel-lst-scrl').css('width','115px'); 

     </script>

</h:body>

 

Run the page, please. Yes, we changed it!