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
Using !Adding the ! important keyword to any CSS rule lets the rule forcefully precede over all the other CSS rules for that element. It even overrides the inline styles from the markup.
Overriding CSS Variable Values The great thing is you can override the global value, so can set something unique to a specific context.
If you can see your new CSS in the Styles pane, but your new CSS is crossed out, it means that there's some other CSS that is overriding your new CSS. In CSS terminology this concept is called Specificity. Chrome DevTools can help you find the old CSS that is causing your new CSS to not be applied.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With