Disable or render checkbox label background highlighting as transparent on click

Question

In the hopes of avoiding confusion, this is much easier to visually present than to describe in text:

GIF Animation Imgur Link

As you can clearly see above, the problem in question is the horrid coloured background "highlight" that occurs once the checkbox is clicked. It is part of the label, and is likely out of the checkbox's bounds due to applying the CSS zoom property on the entire div that houses these two elements. I have tried applying a outline: 0 and background-color: transparent to both the checkbox and the label to no observable avail. I'm beginning to wonder if there even is a CSS-based solution to this at all. Thanks in advance to any who can point me in the right direction here.

Below is the code snippet that houses the checkbox. This is currently written with React JSX (ES6) and is using the Materialize CSS Library on top for general styling overlays:

<div className="row">
  <div className="input-field col s4"></div>
    <div className={finalMargin}>
      <h3>{options.cbText}</h3>
    </div>
    <div className="input-field col s1">
      <input
        type="checkbox"
        className="filled-in"
        id={options.cbTitle}
        onChange={this.handleChange.bind(this, options.cbTitle)}
        />
      <label htmlFor={options.cbTitle} style={{zoom: 4}}></label>
    </div>
  </div>
</div>

EDIT: By request, here is a ReactJS fiddle link to allow you to work with this materialize checkbox component.

Answer 1

This is not a bug. It is because mobile devices highlight the elements which are links or clickable( label{cursor:pointer;}). It indicates to the user that their tap is being successfully recognized, and indicates which element they're tapping on.
You can get rid of the highlighting using:

• Non standard -webkit-tap-highlight-color css property.
• Or, using custom SVG, PNG pointer.

Demo with fix: on codesandbox. Use a mobile device. And tap on labels and not on checkboxes.

label {
  cursor: pointer;

  font-size: 1rem;
  display: inline-block;
  margin-bottom: 2rem;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#two {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

#three {
  cursor: url("data:image/svg+xml,%3Csvg fill='%23f00' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32px' height='32px'%3E%3Cpath d='M 13 2 C 11.355469 2 10 3.355469 10 5 L 10 16.8125 L 9.34375 16.125 L 9.09375 15.90625 C 7.941406 14.753906 6.058594 14.753906 4.90625 15.90625 C 3.753906 17.058594 3.753906 18.941406 4.90625 20.09375 L 4.90625 20.125 L 13.09375 28.21875 L 13.15625 28.25 L 13.1875 28.3125 C 14.535156 29.324219 16.253906 30 18.1875 30 L 19.90625 30 C 24.441406 30 28.09375 26.347656 28.09375 21.8125 L 28.09375 14 C 28.09375 12.355469 26.738281 11 25.09375 11 C 24.667969 11 24.273438 11.117188 23.90625 11.28125 C 23.578125 9.980469 22.394531 9 21 9 C 20.234375 9 19.53125 9.300781 19 9.78125 C 18.46875 9.300781 17.765625 9 17 9 C 16.648438 9 16.316406 9.074219 16 9.1875 L 16 5 C 16 3.355469 14.644531 2 13 2 Z M 13 4 C 13.554688 4 14 4.445313 14 5 L 14 16 L 16 16 L 16 12 C 16 11.445313 16.445313 11 17 11 C 17.554688 11 18 11.445313 18 12 L 18 16 L 20 16 L 20 12 C 20 11.445313 20.445313 11 21 11 C 21.554688 11 22 11.445313 22 12 L 22 16 L 24.09375 16 L 24.09375 14 C 24.09375 13.445313 24.539063 13 25.09375 13 C 25.648438 13 26.09375 13.445313 26.09375 14 L 26.09375 21.8125 C 26.09375 25.277344 23.371094 28 19.90625 28 L 18.1875 28 C 16.722656 28 15.457031 27.476563 14.40625 26.6875 L 6.3125 18.6875 C 5.867188 18.242188 5.867188 17.757813 6.3125 17.3125 C 6.757813 16.867188 7.242188 16.867188 7.6875 17.3125 L 12 21.625 L 12 5 C 12 4.445313 12.445313 4 13 4 Z'/%3E%3C/svg%3E") 0 0, default;
}

<input type="checkbox" id="1" />
<label for="1">Default pointer cursor</label><br>
<input type="checkbox" id="2" />
<label for="2" id="two">tap-highlight-color</label><br>
<input type="checkbox" id="3" />
<label for="3" id="three">SVG pointer cursor</label><br>

You may have to use both solutions because different browsers have different behavior for each.

---

In case of materialize library, they throw original checkbox out of the viewport, using left: -9999px. The animated checkbox is actually ::before and ::after pseudo elements applied on the label.
Your snippet using above fix:

label {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src='https://unpkg.com/[email protected]/umd/react.production.min.js'></script>
<script src='https://unpkg.com/[email protected]/umd/react-dom.production.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<script src='https://unpkg.com/[email protected]/babel.js'></script>
<div id='container'></div>

<script type='text/babel'>
    var Hello = () => (
      <div style={{ backgroundColor: 'white' }}>
        <div className="row">
          <div className="input-field col s5">
            <input type="checkbox" className="filled-in" id="1" />
            <label htmlFor="1" style={{ zoom: 2 }}>Label</label>
          </div>
        </div>
      </div>
    );

    ReactDOM.render(<Hello />, document.getElementById('container'));
</script>