13

Bootstrapサイトに単純なフォームがありますが、白い背景に基本的な灰色のテキストではなく、灰色の背景に白いテキストが必要です。灰色の背景は処理できましたが、プレースホルダーを変更したり、テキストの色を入力したりできないようです。

少しJSFiddleアクション。

これが私のHTMLマークアップです：

<div class="span6" id="email-form">
    <form name="contact-form" id="contact-form" method="post" action="form-processing.php">
        <input class="span6" name="Name" id="Fname" type="text" placeholder="Your name" required>
        <input class="span6" name="Email" id="Email" type="email" placeholder="Your email" required>
        <textarea class="span6" name ="Message" id="Message" type="text" rows="10" placeholder="What services will you be requiring?" required></textarea><br>
        <button type="submit" class="btn btn-primary">Send</button>
        <button type="clear" class="btn">Clear</button>
    </form><!--/.span6-->
</div><!--/#email-form-->

これが私が試したCSSです。背景色の変更は機能しますが、プレースホルダーやテキストは機能しません。

#Email, #Fname, #Message{
    background-color:#666;
}
#Email placeholder, #Fname placeholder, #Message placeholder{
    color:#FFF;
}
#Fname text{
    color:#FFF;
}
4

4 に答える 4

19

これがあなたが探しているCSSだと思います：

input, textarea{
    background-color:#666;
    color: #FFF;
}

プレースホルダーのテキストを #FFF 以外の色にしたい場合は、次の CSS を使用して色を更新できます。

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #FFF;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #FFF;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #FFF;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #FFF;
}

これがあなたのjsFiddleのフォークです

リンクをありがとう@Ben Felda。

于 2013-02-15T21:25:47.537 に答える
2 
#Email, #Fname {
    background-color:#666;
}
input, textarea{
    background-color:#666;
    color: #FFF;
}
::-webkit-input-placeholder { /* WebKit browsers */
    color: #FFF;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #FFF;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #FFF;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #FFF;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #FFF;
}
input:-moz-placeholder, textarea:-moz-placeholder {
    color: #FFF;
}
于 2013-02-15T22:05:26.427 に答える