css 로 placeholder 구현하기

스크립트 필요없이 css만으로도 간단하게 placeholder 부분의 기능을 구현할 수 있다.

html

<div contenteditable="true" placeholder="Please input text."></div>

css

div:empty:before {
  content: attr(placeholder);
  color: gray;
}

single line editor

한줄로만 사용하고 싶을때 css 로 처리할 수 있다.

[contenteditable='true'] {
  white-space: nowrap;
  overflow: hidden;
}
[contenteditable='true'] br {
  display: none;
}
[contenteditable='true'] * {
  display:inline;
  white-space:nowrap;
}