Decrease the size of the cursor in contenteditable element

Question

I am trying to learn some CSS and I currently struggle with the following problem: in the following code if you will try to edit text inside of the span, the cursor (big blinking line) is too huge.

Is there a way to make it the same size of the text, while having everything else looks the same (I assume that my css is not really good, so it can be changed).

.thumbnail-descr{
    min-height: 10px;
    display: table-cell;
    vertical-align: middle;
    font-size: 26pt;
    color: #bbb;
    outline:none;
}

P.S. The problem is with my line-height inside of the .square, but removing it will remove my text from being in the center.

Answer 1

The problem is your massive line-height. I realize that you do this to vertically center the text, but you are going to have to find another way. Since you are using set height, you can just use top or margin-top to push the text down to midway.

http://jsfiddle.net/M4fKM/4/

If you want to cover the case of your text going onto multiple lines, you can use the translateY(-50%) transform.

http://jsfiddle.net/M4fKM/5/