Adjust width of input field to its input

by magizter

HTML

<div contenteditable="true" class="fluidInput" data-placeholder=""></div>

CSS

.fluidInput {

    display: inline-block;
    vertical-align: top;

    min-width: 1em;
    height: 1.5em;

    padding: 0px 2px 0px 2px;
    border: 1px solid #aaa;
    cursor: text;
}


.fluidInput * {

    display: inline;

}


.fluidInput br  {

    display: none;

}


.fluidInput:empty:before {

    content: attr(data-placeholder);
    color: #ccc;

}