CSS / placeholder의 색, 글자 모양 등 꾸미기

placeholder는 HTML5에서 새로 나온 속성(attribute)으로 input 요소나 textarea 요소에 안내문을 넣을 수 있습니다. 기본 모양은 회색의 글자로, 배경색이 하얀색 또는 밝은 색이면 보기에 괜찮습니다. 하지만 배경색이 어두운 색이거나 화려한 색이면 회색 글자가 어울리지 않을 수 있습니다. placeholder는 ::placeholder 선택자로 선택하여 꾸밀 수 있습니다.

다음은 꾸미기 전의 input과 textarea입니다.

::placeholder 선택자로 글자 색과 모양을 바꿔보겠습니다.

Chrome

Firefox

Opera

크롬, 파이어폭스, 오페라, 사파리 최신 버전에서는 잘 적용됩니다. 하지만, 크롬, 파이어폭스, 오페라, 사파리의 구버전과 Edge, IE에서는 적용되지 않습니다.

이 문제를 해결하기 위해 코드를 추가합니다.

Edge

Internet Explorer 11

파이어폭스의 경우 글자가 흐릿하게 나오는데, opacity 속성을 추가해서 조정할 수 있습니다.

Firefox

다음은 위의 모든 내용을 담은 코드입니다.

CSS 강좌