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:outputStylesheet name="select.css" library="css" />







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