<input/>의 자리 표시 자 색상을 변경하는 방법은 무엇입니까?

Question

스타일 시트 및 <input/>과 함께 다음을 시도했지만 여전히 자리 표시 자의 색상이 변경되지 않았으며 기본 색상으로 유지됩니다. 내가 잘못하고 있니?

내 CSS 스타일 시트 :

#input-field { 
    background-color: rgba(255,255,255,0.1); 
    border: 0; 
    border-radius: 5px; 
    width: 150px; 
    height: 40px; 
    padding: 12px; 
    box-shadow: none; 
    color: rgba(255,255,255,0.8); 
} 

:-webkit-input-placeholder { /* WebKit, Blink, Edge */ 
    color: blue; 
} 

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    color: blue; 
    opacity: 1; 
} 

::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    color: blue; 
    opacity: 1; 
} 

:-ms-input-placeholder { /* Internet Explorer 10-11 */ 
    color: blue; 
} 

그리고 내 <input/> :

<input 
    className="form-control" 
    id="input-field" 
    placeholder='Change This Color' 
    /> 

Answer 1

웹킷 필요한 두 개의 콜론 ::

#input-field { 
 
    font-family: serif; 
 
    background-color: rgba(255,255,255,0.1); 
 
    border: 0; 
 
    border-radius: 5px; 
 
    width: 150px; 
 
    height: 40px; 
 
    padding: 12px; 
 
    box-shadow: none; 
 
    color: rgba(255,255,255,0.8); 
 
} 
 

 
::-webkit-input-placeholder { 
 
    color: blue; 
 
} 
 

 
:-moz-placeholder { /* Firefox 18- */ 
 
    color: blue; 
 
    opacity: 1; 
 
} 
 

 
::-moz-placeholder { /* Firefox 19+ */ 
 
    color: blue; 
 
    opacity: 1; 
 
} 
 

 
:-ms-input-placeholder { 
 
    color: blue; 
 
}

<input 
 
    className="form-control" 
 
    id="input-field" 
 
    placeholder='Change This Color' 
 
    />

,

글꼴 - 가족이 당신의 CSS 페이지에 HTML 페이지

<input 
class="form-control" 
id="input-field" 
placeholder='Change This Color' 
/> 

에서 #input-field

Answer 2

에 font-family: serif;를 추가 변경

.form-control::-webkit-input-placeholder { 
    color: red; 
    width: 250px; 
    font-family:Helvetica Neue; 
} 

font-family:Helvetica Neue 간단히 here is the link

Answer 3

나를 위해 노력하고 있습니다 이 코드를 내려 놓으십시오. 귀하의 실수는 콜론을 넣는 것을 잊었다는 것입니다.

나는 많은 시간을 보냈지 만, :-webkit-input-placeholder 뒤에 또 다른 콜론을 붙이면, 그게 ::-webkit-input-placeholder이된다.

방금 ​​내가 한 것과 똑같은 방식으로 다른 사람이 응답 한 것을 발견했으며,이를 복사하려고하지는 않습니다. 왜냐하면 내가 직접 알아 냈기 때문입니다.

완전한 코드를 살펴보십시오. 추신 : 나는 font-family에 대해 필기체로 보았다.

#input-field { 
 
    background-color: rgba(255, 255, 255, 0.1); 
 
    border: 0; 
 
    border-radius: 5px; 
 
    width: 150px; 
 
    height: 40px; 
 
    padding: 12px; 
 
    color: red; 
 
    box-shadow: none; 
 
    font-family: cursive; 
 
} 
 
::-webkit-input-placeholder { 
 
    color: blue; 
 
    font-family: cursive; 
 
} 
 
:-moz-placeholder { 
 
    /* Firefox 18- */ 
 
    color: red; 
 
    opacity: 1; 
 
} 
 
::-moz-placeholder { 
 
    /* Firefox 19+ */ 
 
    color: red; 
 
    opacity: 1; 
 
} 
 
:-ms-input-placeholder { 
 
    color: red; 
 
}

<input className="form-control" id="input-field" placeholder='Change This Color' />