Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Chrome contenteditable caret alignment

Chrome contenteditable caret alignment

Problem

I have a problem in using contenteditable for Chrome. I used the contenteditable property on the onmouseover event of span with some padding. When the span is focused (editing), the caret is aligned to the bottom border of the span when tested in Chrome, it is fine on Firefox.

HTML

Some Editable Text

CSS

[contenteditable]:focus {
    background: rgba(255,220,0,0.3);
    padding: 10px;
}

Fiddle here

Thank you for any help

Problem courtesy of: KiiroSora09

Solution

Add display: inline-block to span

[contenteditable]:focus {
    background: rgba(255,220,0,0.3);
    padding: 10px; 
    display: inline-block;
}
Solution courtesy of: Pramod Bhoi

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Chrome contenteditable caret alignment

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×