Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to override CSS

Tags:

css

primefaces

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

like image 547
Mark Estrada Avatar asked Oct 04 '11 10:10

Mark Estrada


People also ask

How do I override a CSS style tag?

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.

Can we override CSS variables?

Overriding CSS Variable Values The great thing is you can override the global value, so can set something unique to a specific context.

What is overriding my CSS?

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.


1 Answers

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

like image 139
Rob W Avatar answered Sep 17 '22 17:09

Rob W