web-dev-qa-db-ja.com

特定の入力フィールドのプレースホルダーの色を変更するにはどうすればよいですか？

特定のプレースホルダーの色を変更したい。プロジェクトで多くの入力フィールドを使用しています。問題は、一部のセクションでプレースホルダーに灰色を必要とし、一部のセクションでプレースホルダーに白色を必要とすることです。私はこの目的を探し、この解決策を見つけました。

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}

しかし、このコードはすべての入力プレースホルダーに実装されており、すべての入力プレースホルダーを同じ色にする必要はありません。だから誰でも私を助けてください。前もって感謝します。

htmlcssinputplaceholder
11
Ayaz Shah

-input-placeholderをいくつかのclassnameに割り当て、そのクラスを任意のinputに追加する必要があります。これには、 JS = Fiddle

.change::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: #909;
}
.change:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #909;
    opacity: 1;
}
.change::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #909;
    opacity: 1;
}
.change:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #909;
}
input[type="text"]{
    display:block;
    width:300px;
    padding:5px;
    margin-bottom:5px;
    font-size:1.5em;
}
<input type="text" placeholder="text1" class="change">
<input type="text" placeholder="text2">
<input type="text" placeholder="text3">
<input type="text" placeholder="text4"  class="change">
<input type="text" placeholder="text5">
24
Mi-Creativity

プレースホルダーなしでJavaScriptソリューションを使用して、やりたいことを行うこともできます。これがコードです：

//This fix allows you to change the color to whatever textcolor is while also making text go away when you click on it. However, this fix does not put the temporary placeholder back into the textarea when there is no text inside the input.
<input type="text" id="usr" value="Username" onclick="this.value = '';" style="color: red;"/>
<input type="text" id="pwd" value="Password" onclick="this.value = ''; this.type = 'password';" style="color: green;"/>

この修正は一時的なプレースホルダーであり、実際のログインフォームには使用しないでください。 @Ayaz_Shahが彼の回答で推奨したものを使用することをお勧めします。

1
Cannicide
 input::-moz-placeholder {
    color: white;
  }
  input:-moz-placeholder {
    color: white;
    font-size: 14px !important;
  }
  *::-webkit-input-placeholder {
    color: white;
    font-size: 14px !important;
  }
  *:-ms-input-placeholder {
    color: white;
    font-size: 14px !important;
  }
  *:-moz-placeholder {
    color: white;
    font-size: 14px !important;
  }
0
Supriya