Version 1

    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!