[CSS]input 태그 placeholder 스타일 적용하기/ caret

728x90

input 필드의 placeholder에 css를 적용할 수 있다

(font / color / background / opacity / text-indent / line-height / vertical-align / text-decoration / word-spacing / background )

::-webkit-input-placeholder { /* Chrome/Opera/Safari */ }
::-moz-placeholder { /* Firefox 19+ */ }
:-ms-input-placeholder { /* IE 10+ */  }
:-moz-placeholder { /* Firefox 18- */  }

input 필드에 placehoder-shown

input:placeholder-shown {
	border: 5px solid red; 
   }

See the Pen <a href="https://codepen.io/gahyun/pen/NVpapO/">input placeholder CSS</a> by gahyun (<a href="https://codepen.io/gahyun">@gahyun</a>) on <a href="https://codepen.io">CodePen</a>.

caret

See the Pen <a href="https://codepen.io/gahyun/pen/OYwJZG/">input-caret</a> by gahyun (<a href="https://codepen.io/gahyun">@gahyun</a>) on <a href="https://codepen.io">CodePen</a>.

728x90

저작자표시

'CSS > CSS 기초' 카테고리의 다른 글

[CSS]포토샵처럼 blend 사용하기 (mix-blend-mode) (0)	2019.05.16
[CSS] input type=file CSS적용하기 (0)	2019.05.16
[CSS]이미지에 포토샵 처럼 filter 씌우기 (0)	2019.05.15
[CSS]transform(3D) 에서 함께 사용할 속성 perspective(원근법)과 backface-visibility(뒷면가시성) (0)	2019.05.15
[CSS] transform 이용하기 (0)	2019.05.15

퍼블리셔의 다이어리

[CSS]input 태그 placeholder 스타일 적용하기/ caret - input 클릭시 생기는 커서

'CSS > CSS 기초' 카테고리의 다른 글

댓글

티스토리툴바

[CSS]input 태그 placeholder 스타일 적용하기/ caret - input 클릭시 생기는 커서

'CSS > CSS 기초' 카테고리의 다른 글

관련글

댓글

티스토리툴바