Search code examples
cssreactjsfluent-ui

Fluent UI Checkbox - How to NOT show check mark on hover

I am trying to use the Checkbox from https://developer.microsoft.com/en-us/fluentui#/controls/web/checkbox.

By default, it will show the check mark when I hover on the checkbox (please see below), whereas I don't want to show that check mark on hover. Is there any props or styles I can set to achieve that?

enter image description here

Solution

  • Paste this in your CSS this will be applied to all the checkboxes in your element.

    .ms-Checkbox:not(.is-checked):hover .ms-Checkbox-checkmark{
  display:none;
}

    In case you want to apply only for a specific checkbox make it a class like this

    Inside your CSS

    .custom-checkbox:not(.is-checked):hover .ms-Checkbox-checkmark{
  display:none;
}

    In your react component [Note] this example is from the Microsoft website you provided

    <Checkbox label="Unchecked checkbox (uncontrolled)" onChange={_onChange} className="custom-checkbox" />