1. ::placeholder 속성 사용하기

placeholder? input요소와 textarea요소에 알맞은 힌트 제공하는 목적
input::placeholder를 이용하여 input과 별도로 style 지정이 가능

하지만 Chrome, Firefox, Opera, Safari의 구버전과 IE에서는 적용되지 않습니다.
하기와 같이 선택자를 브라우저별로 스타일을 지정할 경우 적용이 가능합니다.

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

2. <input /> placeholder에 icon 넣기

<input /> 안에서 placeholder에 icon을 넣는 방법

1. <input />에 background-image로 url()에 icon을 넣고 input:focus 일때 background-image: none;으로 변경
   - 장점: 브라우저 별로 ::placeholder를 적용하여 스타일 지정할 필요가 없음.
   • 단점: input tag에 text를 입력 후에도 icon이 남아있음.
     
2. ::placeholder 를 이용
   - 장점: input tag에 text를 입력 후엔 icon이 보이지 않음
   • 단점: 브라우저별로 호환이 되는 경우와 안되는 경우가 있어서 확인이 필요함.
     

[Extra] placeholder 속성 이슈

placeholder 는 input에 아무 값이 없을때 입력을 돕기 위한 간단한 힌트(단어 또는 짧은 문장)을 나타냅니다. 겉으로 보기에는 도움되지만 많은 문제가 있다고 합니다.

1. 번역

크롬과 같이 브라우저내에서 자동 번역을 지원해주는 경우 브라우저에서 번역 요청시 번역을 건너 뛰는 속성이 있는데 그 중에 placeholder도 있어서 번역되지 않고 기존 언어로 유지 됩니다.
placeholder가 번역되지 않아서 해당 언어에 익숙하지 않을 경우에는 정확히 이해하고 조작할 수 없을 것입니다.

2. 힌트가 사라짐

사용자가 입력하는 순간 사라지므로 다시 힌트를 보기 위해서는 모든 내용을 삭제해야만 합니다.
특히 새로운 비밀번호를 만들 조건에 대해 나와있는 placeholder였다면 기억력이 좋지 않은 사람은 다시 확인할 것입니다.

3. 힌트의 제한

placeholder는 input너비로 제한됩니다.
모바일웹일 경우에는 중요한 정보가 잘릴 수 있는데 사용자 입장에서느 볼 방법이 없습니다.

해결책

위에서 언급한 문제 외에도 다양한 문제가 있는데 대표적인 것만 나열하였습니다.
해당 문제에 대한 해결로는 <label> 태그 사용이 있습니다.

<label> 태그 사용 시for 속성으로 input과 연결 할 수 있으며, 사용자가 마우스로 해당 텍스트를 클릭할 경우 <label> 요소와 연결된 요소를 곧바로 선택할 수 있어 사용자의 편의성을 높일 수 있습니다.

https://ibrahimovic.tistory.com/30