[HTML] input placeholder 색상 바꾸는 법 (::placeholder 활용)

---

💡 placeholder 색이 너무 연해서 안 보인다면?

input 박스에서 placeholder(힌트 텍스트)가 너무 흐릿해서 사용자들이 잘 못 보는 경우가 많아요.
이럴 땐 CSS의 ::placeholder 선택자를 이용해 placeholder 색상을 직접 설정할 수 있습니다.
이 글에서는 placeholder 색상 변경 방법과 실무에서 자주 쓰는 예제를 알려드립니다.

---

🛠️ placeholder 색상 바꾸기: 코드 예제와 설명

✅ 기본 예제 (인라인 스타일)

<input type="text" placeholder="이름을 입력하세요" style="color: black;">

 

❌ 위 코드는 placeholder 색상이 아니라 입력된 글자 색상을 바꾸는 방법이에요!
placeholder 색상을 바꾸려면 아래처럼 CSS의 ::placeholder 사용해야 합니다.

---

🎯 placeholder 색상 변경 (정석 방법)

<style>
  input::placeholder {
    color: gray;
    opacity: 1; /* 필요시 투명도 조절 */
  }
</style>

<input type="text" placeholder="이름을 입력하세요">

---

🧩 다양한 placeholder 색상 예시

생상	코드 예제
연한 회색	color: lightgray;
파란색	color: blue;
빨간색	color: red;
투명도 조절	opacity: 0.5; (50% 투명)

---

⚡ 브라우저 호환성 체크

::placeholder 선택자는 대부분의 최신 브라우저에서 지원하지만,
구형 브라우저에서는 접두사(-webkit-, -moz-)가 필요할 수 있어요.

input::-webkit-input-placeholder { color: gray; }
input::-moz-placeholder { color: gray; }
input:-ms-input-placeholder { color: gray; }
input::placeholder { color: gray; }

✅ 최신 프로젝트에서는 ::placeholder만 써도 대부분 문제 없음.

---

🏁 마무리 요약

문제 상황	해결 방법
placeholder가 너무 연하다	::placeholder { color: 원하는 색; } 사용
다양한 색으로 설정하고 싶다	CSS color 속성 사용
구형 브라우저 호환까지 하려면	접두사(-webkit-, -moz-) 사용

---

👉 다음 글 예고

[HTML] input 박스 클릭 시 테두리 색상 바꾸는 법 (focus 활용)
이어서 알아볼게요! 놓치지 않으려면 "좋아요" 눌러주시고 "구독" 해주세요 😊