w3.css
플레이스홀더 색상 변경
CSS를 사용하여 플레이스홀더 속성의 색상을 변경하는 방법을 알아보자.
플레이스홀더 색상
input 요소를 사용하고 placeholder 속성을 추가한다.
1단계) HTML 추가
<input type="text" placeholder="A red placeholder text..">
2단계) CSS 추가
대부분의 브라우저에서 플레이스홀더 텍스트는 회색이다. 이를 변경하려면 ::placeholder 선택기를 사용하여 플레이스홀더의 스타일을 지정합니다. Firefox는 플레이스홀더에 불투명도를 낮추므로 이 문제를 해결하기 위해 opacity: 1를 사용한다.
::placeholder {
color: red;
opacity: 1; /* Firefox */
}
::-ms-input-placeholder { /* Edge 12 -18 */
color: red;
}
기본 예시
예제 보기참고
W3C School - Change Placeholder Color
공부 목적 블로그