CODEWITHSUNDEEP
cssprimefaces
Mark Estrada
Mark Estrada

Reputation: 9191

How to override CSS

I have basic CSS experienced so I would like to know how can I remove a style CSS that was set by Primefaces?

.ui-inputfield, .ui-widget-content .ui-inputfield, .ui-widget-header .ui-inputfield {
    box-shadow: 0 2px 2px #74B2E2 inset;
}

I created my own stylesheet myCustomStyle.css

.ui-inputfield, .ui-widget-content .ui-inputfield, .ui-widget-header .ui-inputfield {
    box-shadow: ?????? (How can I override the styling)
}

Thanks

Upvotes: 9

Views: 33665

Answers (3)

maple_shaft
maple_shaft

Reputation: 10463

I would like to add that the Primefaces framework utilizes prebuilt themes using the jQuery UI ThemeRoller.

You can use the ThemeRoller to create new themes or modify existing themes to your liking.

Upvotes: 0

Nathan
Nathan

Reputation: 11149

.ui-inputfield, .ui-widget-content .ui-inputfield, .ui-widget-header .ui-inputfield {
    box-shadow: none;
}

There's a whole issue of precedence here too, but if you're style sheet is inserted after the other one, then it will normally work. If it doesn't, add !important after the none.

Upvotes: 3

Rob W
Rob W

Reputation: 349002

Use box-shadow:none to reset the box-shadow to the defaults.

See this source for information about the box-shadow property. All properties can be "resetted" by defining the same property, and using the default value.

To get your myCustomStyle.css override the Primefaces' css file, you have to include your custom file after the primefaces' file.

A last resort: If your custom style doesn't get applied, add !important after your declaration (but before the semicolon): box-shadow: none !important

Upvotes: 20

Related Questions