how to change the edge of a commandButton with css?

Question

how to change the edge of a commandButton with css?

Navigation

#1 by (0 votes)

0

I am working with primefaces and I want to round up my buttons, but I do not take the css, how can I do it, or what is the correct form I have the following code

<h:head>

 <style type="text/css">
        boton {
           border-radius: 5px;

        }
    </style>

</h:head>
<h:body>
    <h:form>              

        <br></br>
        <h:panelGrid id="panelButtons" columns="3" style="text-align:center;" width="90%">   
            <p:commandButton id="boton" value="Empleados"   styleClass="ui-priority-primary" update="dlg1" oncomplete="PF('dlg1').show();" />
        </h:panelGrid>

primefaces jsf

asked by Root93 23.01.2018 в 17:14

source

1 answer

How to color the font and background of a SearchView suggestion box? Problem with git does not upload files

score 0 · Answer 1

There is an error in your CSS selector. This is what you have:

<style type="text/css">
    boton {
        border-radius: 5px;
    }
</style>

And this is what you should have:

<style type="text/css">
    #boton {
        border-radius: 5px;
    }
</style>

The numeral (#) indicates that your selector must work for the elements that have the ID attribute with the value "button", which is exactly what you have in <p:commandButton> .

Also keep in mind that JSF can add a prefix to the ID attribute of the elements when they are within a <h:form> , a <ui:repeat> , among others. In this case the easiest is to use a selector per class instead of one per ID. Your code would look like this:

<h:head>
    <style type="text/css">
        .boton {
            border-radius: 5px;
        }
    </style>
</h:head>
<h:body>
    <h:form>              
        <br></br>
        <h:panelGrid id="panelButtons" columns="3" style="text-align:center;" width="90%">   
            <p:commandButton value="Empleados"   styleClass="boton ui-priority-primary" update="dlg1" oncomplete="PF('dlg1').show();" />
        </h:panelGrid>

Greetings