Edit cursor not displayed on Chrome in contenteditable

Question

When you open this page (see Live demo) with Chrome :

<span id="myspan" contenteditable=true></span>

CSS :

#myspan { border: 0; outline: 0;}

JS :

$(myspan).focus();

the contenteditable span has focus (you can start to write things and you will see that it already had focus), but we don't see the "I" edit cursor.

How to make that this cursor is displayed ? (Remark : outline:0 is needed, as well as the fact that the span is empty even with no white space).

Note : With Firefox, the cursor is displayed.

Answer 1

The problem is that spans are inline elements. Just add display:block; to your CSS and it will fix the problem.

$(myspan).focus();

#myspan {
    border: 0;
    outline: 0;
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span id="myspan" contenteditable=true></span>