Search code examples
htmlcsscontenteditable

Cursor not visible within a contenteditable element, when placed at the start of a line

I'm using HR's instead of BR's so that I can give line breaks a visual dimension and style them cross browsers with a specific unicode character.

However, when I place the cursor at the start of each line the cursor is not visible. Any ideas how to tweak the styling to make it visible ?

Affected browser: Chrome

.edit-box{
  border: 1px solid black;
  padding: 10px;
}

.line-break{
  border:none;
  margin:0;
  display:inline;
  white-space: nowrap;
}
.line-break::before{
    content: "\21B2";
    vertical-align:5%;
}
.line-break::after{
  content:'';
  display:block;
}
<div id="test" contenteditable="true" class="edit-box">
  If you place the cursor at the beggining of the following lines <hr class="line-break">The caret is not visible. (before "the")<hr class="line-break">Any css hack to make the cursor visible ? 
</div>

Solution

  • It's an old bug, I believe it is about 5 years old so don't expect it to be addressed any time soon. Here's the bug tracker: https://bugs.chromium.org/p/chromium/issues/detail?id=170148 it's been fixed *but there is a new quirky bug recently reported:

    This bug reproduces in Chrome v54 on Linux and Windows if has pseudoclass :after

    You have pseudo-classes so try not using them, and try not to use <hr>s like that, it's unnatural. :P