pelican_george pelican_george - 1 year ago 85
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 {

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?

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.


Answer Source

Use these styles:

.tag {
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download