Pseudo element takes up space in IE9

Question

I have a div that I want to behave like an text input field.

Here's the full source code example:

HTML:

<div contenteditable='true'></div>

CSS:

div:empty:before {
    content: 'Type here...';
    color: #ccc;
}

div{
    padding: 4px;
    border: 1px solid #ccc;
}

See the fiddle in IE9.

In IE9, the problem is that the keyboard caret is displayed at the end.

In Chrome, the caret is at the beginning, which is correct.

It seems like the problem is that the pseudo :before element is taking up space in IE9. How can I make it take up no space like it does it Chrome (behave like a placeholder)?

Answer 1

To make it work in IE:

div:empty:before {
    content: 'Type here...';
    color: #ccc;
    display: inline-block;
    width: 0;
    white-space: nowrap;
}

display: inline-block makes it possible to set a width.

width: 0 makes sure that the element does not take up space.

white-space: nowrap forces the text to be in one line (would break lines otherwise because of the limited space)

updated fiddle