HTML, div를 input으로 쓰기

attribute중에 contenteditable을 사용하면

div를 input, textarea처럼 쓸수있다.

 

입력창을 커스텀해서쓸때 종종 쓰이곤한다.

방법은 간단하다.

 

html + css / html + scss 버전 두가지를 살펴보자

 

1. html + css

<div contenteditable placeholder='메시지를 입력해주세요'></div>

[placeholder]:empty:before {
  display: block;
  content: attr(placeholder);
  color: #a6a6a6;
}

 

 

2. html + scss

<div contenteditable placeholder='메시지를 입력해주세요'></div>

&[placeholder]:empty:before {
  display: block;
  content: attrs(placeholder);
  color: #a6a6a6;
}