1

I have a contenteditable text structure like so:

<div class="content" contenteditable="true">
  <span contenteditable="false">
    <span class="chunk" contenteditable="true">This sentence contains </span>
  </span>
  <span contenteditable="false">
    <span class="chunk bold" contenteditable="true">some bold</span>
  </span>
  <span contenteditable="false">
    <span class="chunk" contenteditable="true">text!</span>
  </span>
</div>

This enables selecting text across all 3 "chunk" spans. However, removing the "outline" from it using css disables selecting text:

.chunk {
  outline: 0px solid transparent;
}

Can anybody explain why? JSBIN example

EDIT

It's definitely the EXISTENCE of the outline that's causing the issue. Giving it a 1px solid transparent outline still allows text selection. As soon as you specify 0px, it prevents selection.

Alex McMillan
  • 17,096
  • 12
  • 55
  • 88

0 Answers0