input의 placeholder 속성 꾸미기

placeholder 는 input 박스 안에 input 의 사용용도나 설명 내용을 넣을 수 있습니다.

하지만 기존의 낮은 브라우저에서 작동을 하지 않기 때문에

label 태그를 이용하거나 다른 태그에 내용을 넣어 스크립트로 작동하게 만들어 사용하였습니다.

CSS3 기술임으로 모바일 위주의 작업에서 사용하면 유익할 것으로 보입니다.

다음은  input 에 placeholder 를 사용하는 코드입니다.

 
<input class="text-placeholder" type="text" placeholder="아이디를 입력해 주세요." />
 

다음은 placeholder 선택자를 사용하여 input을 입력하기전 내용을 꾸며 줄 수 있습니다.

.text-placeholder-wrap{border-radius:5px; border:1px solid #e1e1e1; padding:20px;}
.text-placeholder{margin:0; padding:0; border:1px solid #000; height:28px; line-height:28px; background:red; color:#fff; font-size:13px;}
.text-placeholder::-webkit-input-placeholder{font-size:13px; color:blue; background:green;}
.text-placeholder::-moz-placeholder{font-size:13px; color:blue; background:green;}
.text-placeholder:-moz-placeholder{font-size:13px; color:blue; background:green;}
.text-placeholder:-ms-input-placeholder{font-size:13px; color:blue; background:green;}
 

* 주의 : input에 height 와 line-height 값을 같게 입력해야 input영역에 맞게 placeholder 영역이 나옵니다.

다음은 적용되어진 실제 화면 입니다.