fileUpload use different styleclass

Post Reply
Posts: 3
Joined: 16 Dec 2018, 17:53

10 May 2019, 22:37


I am trying to present 8 upload buttons in one page. Each upload button needs to be changed into a different image. Which means each button will have a look of a different image. I was able to override the main primefaces css classes bellow

Code: Select all

.ui-fileupload-buttonbar .ui-icon {

    margin: 0px 0px 0px 0px !important;
    padding: 0px 0px 0px 0px !important;
    border: none;

    visibility: hidden !important;

.ui-button-text-icon-left .ui-button-text {
  font-size: 0.5em;
  background:url(../resources/california-layout/images/avatar.png) no-repeat;
  background-size: 100%;
  width: 100px;
  height: 120px;
/* Icon */
.ui-button-text-icon-left .ui-icon {
  display: none;
I already put the style that changes the upload button into an image. However this impact all my primefaces upload buttons. Which is not my requirement. What I need is to make each fileUpload button has its own styleClass with a different picture for each one.

Please let me know in details and steps how can I change <p:fileUpload> button styleClass to make each button has a different style depending on its own styleClass.

Looking forward for your soon reply.

Omar Mostafa

Posts: 4484
Joined: 29 Jun 2013, 12:38

14 May 2019, 08:37

Could you please attach a screenshot for me?
8 upload buttons
- Are they custom buttons? The attached style;

Code: Select all

.ui-fileupload-buttonbar .ui-icon {
    visibility: hidden !important;

Post Reply

Return to “California - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest