CODEWITHSUNDEEP
htmlcsscontenteditable
jameshfisher
jameshfisher

Reputation: 36405

Why is the caret invisible in a contenteditable with position:relative?

When a contenteditable element has position: relative and a background color, the caret is invisible when it's placed in that element. Here's an example:

.bug {
  position: relative;
  background-color: lightgrey;
}
<div contenteditable>
  This has caret
  <span class="bug">no caret here?!</span>
  this has caret
</div>

My first thought was "this is a browser bug", but it's the exact same bug on Chrome and Firefox!

What causes the caret to disappear? And is there a workaround?

Upvotes: 4

Views: 2458

Answers (1)

Ben Souchet
Ben Souchet

Reputation: 1532

Don't know the exact cause of the issue but you can fix it in multiple ways.

My previous explanation (maybe wrong) :

This isn't a bug, you put the background color on a <span> tag (in position:relative) inside a contenteditable div element and so the span is on top of the contenteditable div.

I still think is related to the z-index since we can see on the image below the red background on top of the Chrome focus border:

enter image description here

Remove position:relative

Removing position:relative of the <span> fix the issue:

.no-bug {
  background-color: red;
}
<div contenteditable>
  This has caret
  <span class="no-bug">This has caret !</span>
  this has caret
</div>

Adding a z-index to the <span> element

Adding a negative z-index also fix the issue:

.no-bug {
  background-color: red;
  position: relative;
  z-index: -10;
}
<div contenteditable>
  This has caret
  <span class="no-bug">This has caret !</span>
  this has caret
</div>

Adding a display: inline-block to the <span> element

Adding a display: inline-block (or display: block) fix the issue:

.no-bug {
  background-color: red;
  position: relative;
  display: inline-block;
}
<div contenteditable>
  This has caret
  <span class="no-bug">This has caret !</span>
  this has caret
</div>

Others Stackoverflow related questions

Upvotes: 9

Related Questions