Removing inherited property of an element (box-sizing)

Question

I am using a jQuery light box plugin on a bootstrap site. It has box-sizing: border-box set via universal selector.

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

The light box div does not appear right because of this (sometimes a vertical scrollbar appears). Once we remove this through web inspector it appears ok. Is there any way to remove the box-sizing property of this particular element. box-sizing:'' or box-sizing:none does not appear to work.

Isomeric

take a look at this if you wish to have both border-box reset and box-sizing customization. – Nagy

Answer 1

The box-sizing^{msdn, mdn} CSS property default is box-sizing: content-box;. Have you tried to use it to override the inherited style?

Eohippus

Thanks for the pointer. I had to apply it to few more child elements and it worked. – Isomeric

Thank you! This helped me on the new Bootstrap 3 allowing me to integrate Bootstrap with an existing (non-Bootstrap) site. – Ramayana

@GokulKav i am facing same issue what else changes did u make ? they may be helpful for me – Coadjutor

Even though Chrome devtools says it is applying the style, and even though I applied it to all children using .elem *, .elem *::after, .elem *::before, and even trying !important, it still wouldn't make a difference until I literally duplicated the selector that originally applied it, as * {box-sizing: content-box;} and hit all possible elements with that, apparently. – Gouache

Answer 2

I had a similar problem with bootstrap and I did override the box-sizing CSS property for <a> like this,

a *,
a *:before,
a *:after {
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;
}

Customize it for your need.

Superorder

Answer 3

you can use

*:not(.classname){
  box-sizing : border-box;
}

classname will be the class of element you want to exclude from the universal selector.

Gastrin

Answer 4

Override like this:

* {
box-sizing: border-box!important;
}

Heth

I wanted to remove border-box. not add importance to border-box. – Isomeric