自定义样式复选框双击时误选相邻文本问题排查

我做了个自定义复选框（选中状态的图标URL无效，这个问题可以忽略），但双击它的时候，旁边表格列里的文本会被意外选中——第一次双击选第一个单词，再双击会选更多内容，这明显不符合预期。我对比过用label和::before/::after实现的常规自定义复选框，人家就没这问题，想问问这到底是啥原因？

代码示例 #

CSS 样式 #

.my-checkbox {
       margin-bottom: 40px;
       background: #fff;
}

.my-checkbox__input {
      position: absolute;
    left: -999em;
    right: auto;
        box-sizing: border-box;
    padding: 0;
    overflow: visible;
}

.my-checkbox__label {
    cursor: pointer;
    display: inherit;
    font-weight: 400;
    margin-top: 0.75rem;
    padding-left: 2rem;
    position: relative;
    color: #1b1b1b;
    font-family: Source Sans Pro Web,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;
    font-size: 1.06rem;
    line-height: 1.3;
}

.my-checkbox__label::before {
    content: " ";
    left: 0;
    margin-left: 2px;
    margin-top: 0.064rem;
    position: absolute;
    height: 1.25rem;
    width: 1.25rem;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 0 0 2px #1b1b1b;
}

.my-checkbox__input:checked+[class*=__label]::before {
    background-position: center center;
    background-size: 0.75rem auto;
}

.my-checkbox__input:checked+[class*=__label]::before {
    background-image: url('my.svg');
    background-repeat: no-repeat;
}

HTML 结构 #

<table>
  <tr>
    <td>

<div class="my-checkbox">
    <input class="my-checkbox__input" id="checkbox0" title="Select All" type="checkbox" name="checkbox" />
    <label class="my-checkbox__label" for="checkbox0"></label>
 </div>
    </td>
    <td>
       Some text in another table column
    </td>
  </tr>
</table>

<br/>
Regular checkbox:

<table>
  <tr>
     <td>
       <div>
         <input type="checkbox" name="checkbox" id="checkbox0" />
         <label for="checkbox0"></label>
       </div>
     </td>
     <td>
        Some text in another table column
  </tr>
</table>

异常效果截图 #

问题成因 #

核心问题出在.my-checkbox__label的display: inherit属性上：

• label的父元素是<td>，而<td>默认的display值是table-cell，所以label继承了这个属性值。
• 浏览器对table-cell元素的双击行为有特殊处理：双击表格单元格内的元素时，文本选择范围会自动延伸到同一表格行的其他单元格内容，这就导致了双击复选框时，旁边列的文本被选中。
• 常规自定义复选框示例里的label用的是默认的inline-block或block，属于独立的块级/行内块元素，不会触发表格行级的文本选择逻辑。

修复方法 #

把.my-checkbox__label的display属性从inherit改成block或者inline-block即可：

.my-checkbox__label {
    cursor: pointer;
    display: block; /* 替换原有的display: inherit */
    font-weight: 400;
    margin-top: 0.75rem;
    padding-left: 2rem;
    position: relative;
    color: #1b1b1b;
    font-family: Source Sans Pro Web,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;
    font-size: 1.06rem;
    line-height: 1.3;
}

这样label就成为独立的块级元素，双击时浏览器只会识别这个元素本身，不会延伸到相邻单元格的文本，问题就能解决。

内容的提问来源于stack exchange，提问作者gene b.