How to add space between buttons in selectOneButton

css, jsf, primefaces

Solution

One example:

body .ui-buttonset .ui-button {
    margin-right: 10px;
}

The `body` is there so that the rule is more specific that the primefaces rule.

Alternatively, you can include your stylesheet like so:

     <f:facet name="last">
        <!-- Runs after primefaces css. I can't get <outputStylesheet/> to work here, however. -->
        <link rel="stylesheet" type="text/css" href="#{facesContext.externalContext.requestContextPath}/resources/css/index.css"/>
    </f:facet>

This allows equally specific styles override primefaces styles.

You will need to consult HTML/CSS inspection tools in your browser to determine what CSS to use.

Problem

i am using the selectOneButton and i want to add space between buttons, and if possible change the selection background color, please advise how to do that, thanks. here's the code: ``` <p:selectOneButton value="#{buttonBean.number}"> <f:selectItem itemLabel="Option 1" itemValue="1" /> <f:selectItem itemLabel="Option 2" itemValue="2" /> <f:selectItem itemLabel="Option 3" itemValue="3" /> </p:selectOneButton> ```

Original source