css – div에 글자 입력 받고 placeholder 넣기 | 개발자 남인식 Lab.

div input placeholder text 글자 입력 텍스트

css - div에 글자 입력 받고 placeholder 넣기

<div contenteditable="true" placeholder="여기에 글자를 입력해주세요."></div>

위 처럼 html을 작성한 후 아래처럼 css를 작성한다.

[contenteditable=true]:empty:before{
  content: attr(placeholder);
  display: block; /* For Firefox */
}

div[contenteditable=true] {
  border: 1px solid #ddd;
  color : #333;
  font-size: 12px;
  width: 300px;
  padding: 5px;
}

아래는 샘플

TOP