초점에서 자리 표시 자 색상을 변경하는 방법은 무엇입니까?

초점에서 자리 표시 자 색상을 변경하는 방법은 무엇입니까?

---

입력 필드에 초점을 맞출 때 자리 표시 자의 색상을 변경하는 방법은 무엇입니까? 이 CSS를 사용하여 기본 색상을 설정하지만 초점을 맞추는 방법은 무엇입니까?

::-webkit-input-placeholder { color: #999; }

/* Firefox < 19 */
:-moz-placeholder { color: #999; }

/* Firefox > 19 */
::-moz-placeholder { color: #999; }

/* Internet Explorer 10 */
:-ms-input-placeholder { color: #999; }

---

이것을 시도하면 작동합니다.

input::-webkit-input-placeholder {
    color: #999;
}
input:focus::-webkit-input-placeholder {
    color: red;
}

/* Firefox < 19 */
input:-moz-placeholder {
    color: #999;
}
input:focus:-moz-placeholder {
    color: red;
}

/* Firefox > 19 */
input::-moz-placeholder {
    color: #999;
}
input:focus::-moz-placeholder {
    color: red;
}

/* Internet Explorer 10 */
input:-ms-input-placeholder {
    color: #999;
}
input:focus:-ms-input-placeholder {
    color: red;
}

예 : http://jsfiddle.net/XDutj/27/

---

Pranav 답변 외에도 텍스트 영역 호환성으로 코드를 수정했습니다.

::-webkit-input-placeholder { color: #999; }
:-moz-placeholder { color: #999; }

:focus::-webkit-input-placeholder { color: #ccc; }
:focus:-moz-placeholder { color: #ccc; }​

---

이 시도:

HTML

<input type='text' placeholder='Enter text' />

CSS

input[placeholder]:focus { color: red; }

---

JQuery로이 솔루션을 찾았습니다.

 $('input[type="text"]').each(function(){

    $(this).focus(function(){
      $(this).addClass('input-focus');
    });

    $(this).blur(function(){
      $(this).removeClass('input-focus');
    });

  });

이 CSS로 :

.input-focus::-webkit-input-placeholder { color: #f00; }    
.input-focus:-moz-placeholder { color: #f00; }
.input-focus:-ms-input-placeholder { color: #f00; }

---

별표 *를 사용 하여 모두 선택

*::-webkit-input-placeholder { color: #999; }


*:-moz-placeholder { color: #999; }


*::-moz-placeholder { color: #999; }


*:-ms-input-placeholder { color: #999; }

---

다음은 나를 위해 일했습니다.

input:focus::-webkit-input-placeholder
{
    color: red;
}

---

Firefox 19에서 : form 요소와 placeholder 속성과 일치하는 : -moz-placeholder 의사 클래스가 제거되고 대신 ::-moz-placeholder 의사 요소가 추가되었습니다.

input:focus::-moz-placeholder { color: transparent; }

---

입력 필드에 초점이 맞춰지면 맨 위로 축소되는 머티리얼 디자인 애니메이션 자리 표시자를 만들 수 있습니다.

<div class="field">
 <input type="text" name="user" required><br>
 <label>Enter Username</label>
 </div>

Basically the label field is going to act like a placeholder. We can do this only using css. Explained here http://www.voidtricks.com/create-material-design-animated-placeholder/

ReferenceURL : https://stackoverflow.com/questions/13183421/how-to-change-placeholder-color-on-focus