csspolymerpolymer-1.0paper-elements

Apply border radius to paper-checkbox? No mixin available

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>
Solution

  • 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: unchecked circular checkbox checked circular checkbox

    demo

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