Notice
Recent Posts
Recent Comments
Link
«   2024/06   »
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30
Archives
Today
Total
관리 메뉴

web sprit

input의 placeholder 속성 꾸미기 본문

웹5/CSS3

input의 placeholder 속성 꾸미기

커드만 2016. 4. 8. 06:00

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

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

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


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


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

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



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

1
2
3
4
5
6
7
8
.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;}
 
cs


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


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









'웹5 > CSS3' 카테고리의 다른 글

transform 속성  (0) 2016.04.14
벤더프리픽스 (Vendor Prefix)  (0) 2016.04.12
CSS 말줄임, 점처리, 생략처리 방법  (0) 2016.04.07
box-sizing 속성  (0) 2016.04.06
CSS 초기화 (CSS Reset) 종류 및 방법  (0) 2016.03.16
Comments