Apply border radius to paper-checkbox? No mixin available

Question

Polymer 1.*

Is there a way to apply border-radius: 50% to paper-checkbox since it does not have a mixin available? and /deep/ has long been deprecated.

      <paper-checkbox
        name="apples"
        class="checkbox"
        value="1">1</paper-checkbox>

You can apply the border radius https://jsfiddle.net/7vmexhtd/, what will be the use-case ? — bhansa, Sep 30 '17 at 18:20
@bhansa He probably means to apply the border radius to the checkbox itself (not the container). — tony19, Sep 30 '17 at 18:32
Possible duplicate of [Styling Polymer paper-slider](https://stackoverflow.com/questions/34650000/styling-polymer-paper-slider) — vikdoro, Sep 30 '17 at 22:41

score 1 · Accepted Answer · answered Oct 01 '17 at 19:18

The checkbox of the <paper-checkbox> has an ID of "checkbox", so you could imperatively get a reference to it with Automatic node finding syntax (this.$.myPaperCheckbox.$.checkbox) to style the inner checkbox's border radius (checkbox.style.borderRadius):

attached: function() {
  // <paper-checkbox id="myPaperCheckbox">
  this.$.myPaperCheckbox.$.checkbox.style.borderRadius = '50%';
}

Result:

demo

You might also consider switching to <paper-radio-button>, which already uses a circular checkbox (but with a different/circular checkmark).

Apply border radius to paper-checkbox? No mixin available

1 Answers1