dman dman - 3 years ago 192
CSS Question

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>

Answer Source

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).

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download