pelican_george pelican_george - 26 days ago 15
CSS Question

HTML5 contenteditable - placing the cursor before a non editable display block element

I'm trying to place a span within a contenteditable element which sort of represents a tag/separator as such:



.tag {
display:block;
background-color:red;
}

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

<div id="test" contenteditable="true" class="edit-box">
<span class="tag" contenteditable="false">NON EDITABLE</span>How to style the span element so it's possible to place the cursor at the start?
</div>





I'm trying to edit text before and after the span element, but it's impossible to place the cursor just before the element.
Any ideas how to style the span element to allow a more flexible cursor movement around it.

FIDDLE

Answer

Use these styles:

.tag {
  display:inline-block;
  width:100%;
  background-color:red;
}
Comments