Radio buttons break when using border-box

[bjornandersson]

Radio buttons doesn't look good when using frameworks like bootstrap or normalize because the setting box-sizing: border-box

Normalize uses the following contruct which breaks all Polymer radio buttons.

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

[sorvell]

The issue here is that these global styles are leaking down into paper-radio-button where they should not apply. This kind of css encapsulation issue is one of the basic problems that Web Components are designed to solve. For example, if you tell Polymer to use native Shadow DOM and run in Chrome, you will not see this issue.

Polymer's shim/polyfill for Web Components is imperfect so this type of thing can still happen. Polymer provides a <style is="custom-style"> element that can be used to automatically encapsulate selectors so that they do not leak down into element styling scopes. If you wrap these styles in a <style is="custom-style"> the problem should go away.

We plan to add a way to load remote stylesheets such that they also can be shimmed to not leak down into elements, (see #1876).

[eximius313]

But how I can change it if this is defined in bootstrap.min.css for * selector??

[sorvell]

As stated above, when #1876 is addressed, you'll be able to do something like this to include bootstrap.min.css such that it does not leak into elements:

<link rel="import" is="custom-stylesheet" href="bootstrap.min.css">

[eximius313]

I can see that this issue: #1876 has been addressed: https://blog.polymer-project.org/announcements/2015/08/13/1.1-release/
Unfortunately I still don't have any idea how to get rid of this box-sizing: border-box issue with Bootstrap.
I have three files:

    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="/bootstrap/css/bootstrap-theme.min.css" type="text/css">
    <link rel="stylesheet" href="/css/style.css" type="text/css"> //my CSS

could you please tell me which of them and how should I include?

[eximius313]

@bjornandersson have you managed to overcome this issue?
Is paper-radio-button working well for you with bootstrap?
Should really this issue be closed?

[bjornandersson]

@eximius313 haven't checked. The POC with using Polymer in my project was rejected.

[eximius313]

:(