Question

为了避免混淆，这在视觉上要比在文本中描述容易得多：

正如您可以清楚地看到的那样，问题是单击复选框后出现的可怕彩色背景“突出显示”。它是标签的一部分，由于在包含这两个元素的整个div上应用CSS缩放属性，因此很可能不在复选框的边界内。我已经尝试将outline: 0和background-color: transparent应用于复选框和标签，以便无法观察到。我开始怀疑是否有基于CSS的解决方案。提前感谢任何能指出我正确方向的人。

下面是包含复选框的代码段。目前这是用React JSX（ES6）编写的，并且在顶部使用Materialize CSS Library用于一般样式叠加：

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

编辑：根据请求，这里有一个ReactJS fiddle link，允许您使用此实体化复选框组件。

禁用或渲染复选框标签背景突出显示为单击时透明

0 个答案: