Html - Double-clicking a styled checkbox incorrectly selects text next to it

geneb
January 25, 2024
151 views
0 votes
2 Answers

In the below example I have a custom checkbox (the selected image doesn’t work because the URL is invalid, but disregard that).

In this CSS, double-clicking the checkbox for some reason selects the text that is next to it. This shouldn’t happen and I have to fix this behavior. On the first double-click it selects the first word and then an additional part. Does anyone know where this comes from?

.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;
}

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

In terms of custom-CSS checkboxes using label and ::before/::after, I see that this example doesn’t have this problem, but mine does:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_checkbox

Tags: css html

Answers

Answering your question on why that select behaviour is happening, while I couldn’t find any documentation on this behaviour / bug, I did notice that it only happened when using position: absolute; on .my-checkbox__label::before. If you switch that to position: relative, text won’t be selected in the other table data cell.

If you didn’t want to update it’s position and just wanted to disable that behaviour, you can add user-select: none to the parent element, like so: <div class="my-checkbox" style="user-select: none;"> to disable user-select behaviour on child elements.

As for making your checkbox actually function like an input, that isn’t your question so I’ll leave my answer there. But here is a url for reference: https://www.w3schools.com/howto/howto_css_custom_checkbox.asp

.my-checkbox {
    /*margin-bottom: 40px;*/
    margin-bottom: 20px;
    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;
    
    padding-right: 0.5rem;
}

.my-checkbox__label::before {
    content: " ";
    left: 0;
    margin-left: 2px;
    margin-top: 0.064rem;
    /*position: absolute;*/
    position: relative;
    display: block;
    
    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;
}

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

The same sort of problem can be seen in even simpler cases, for example two adjacent spans. If there is no text in the first one then the first word in the second one is selected on a double click. [This is on Windows 10 Edge/Chrome].

Taking the example given in the question, we can switch off selection in the label (user-select: none;) and it will not ‘move on’ to select the first word in the next element.

.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;
  user-select: none;
}

.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;
}

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

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Double-clicking a styled checkbox incorrectly selects text next to it

Answers