CSS

[selector] CSS - ::placeholder 가상선택자 - 플레이스홀더 선택자

목차

  1. ::placeholder 예제 - 플레이스홀더 글자색 변경
  2. ::placeholder 정의
  3. ::placeholder 구문

 

::placeholder 예제 - 플레이스홀더 글자색 변경

 

<style>

::-webkit-input-placeholder { /* Edge */

  color: red;

}

:-ms-input-placeholder { /* IE */

  color: red;

}

::placeholder {

  color: red;

}

</style>


<input type="text" name="hz" placeholder="Homzzang.com">

 

결과보기

 

::placeholder 정의

 

플레이스홀더 (= 입력값 예시 표시) 선택.

 


 

1.

  • placeholder 속성값에 스타일 줄 때 사용.
  • 기본 글자색: 밝은 회색 (※ 대부분 브라우저 경우)


2. HTML placeholder 속성

https://homzzang.com/b/html-145

3.

IE 제외한 주요 최신브라우저 모두 지원.

 

4.

MDN ::placeholder 선택자 예제 보기

https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder

 

 

::placeholder 구문

 

::placeholder { css 선언;}

 



분류 제목
css CSS - tab-size 속성 - 탭크기(=탭너비) 지정 (= tab-size속성 = 탭사이즈속성)
counter CSS - counter() 함수 / counters() 함수 - 카운터 값을 요소에 추가 (= counte…
css CSS - clip-path 속성 - 보일 범위 지정해 자르기 (= clip-path속성 = 클립패스속성) …
grid CSS - grid-template-columns 속성(C) ★ - 그리드 열 개수와 너비 지정 (= gri…
text CSS - text-emphasis-color 속성 - 텍스트 강조마크의 색상 지정 (= text-empha…
font CSS - font-size-adjust 속성 - 소문자 x 높이 기준으로, 대체 글꼴 크기 재조정 (= f…
font CSS - font-stretch 속성 - 폰트 너비 조정 (= font-stretch속성 = 폰트스트레치속…
css CSS - widows 속성 - 페이지나 열의 상단에 남겨야 하는 최소 줄 수 지정 (= widows속성 =…
background CSS - background-position-y 속성 - 배경이미지 y축위치(=수직위치) 설정 (= bac…
text CSS - text-emphasis-position 속성 - 텍스트 강조마크 위치 지정 (= text-emp…
grid CSS - grid-template-areas 속성(C) - 그리드 아이템의 컬럼 영역 지정 (= grid-…
text CSS - text-decoration-thickness 속성 - 텍스트라인 두께 지정 (= text-dec…
counter CSS - counter-increment 속성 - 카운터 값 증가 (= counter-increment속성…
css CSS - 지그재그 톱날모양 물결무늬
box CSS - aspect-ratio 속성 - 요소의 종횡비율(= 가로세로비율) 지정 (= aspect-rati…
13/35
목록
 홈  PC버전 로그인 일본어
그누앞단언어
그누뒷단언어
그외코딩언어
그누보드
제작의뢰
Q&A
커뮤니티
웹유틸
회원센터
홈짱닷컴 PC버전 로그인