Css 样式搜索框

我拼命想把搜索栏中“搜索…”文本的字体颜色改成白色。但我只设法更改输入文本。（见链接：）

希望你能帮助我

php如下所示：

<?php
/************************************************************************
* Search Form
*************************************************************************/

?>


<div class="widget">

    <form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>" role="search" class="search">

        <input type="text" class="field" name="s" value="<?php echo esc_attr( get_search_query() ); ?>" id="s" placeholder="<?php esc_attr_e( 'Search &hellip;', 'framework' ); ?>" />

    </form>

</div>

---

查看HTML，您使用的是

占位符

属性：

<input type="text" class="field" name="s" value="" id="searchBox" placeholder="Search …" autocomplete="off">
---------------------------------------------------------------------^^^

搜索框的ID为“s”，因此您可以通过在这些选择器前面加上

#s

来明确搜索框的目标。例如：

#s::-webkit-input-placeholder { /* WebKit browsers */
    color:    #FFF;
}

注意：
请记住，似乎您必须定义所有这些样式，否则整个组将被忽略。请阅读此问题的更多内容：

---

JSFiddle:
-将占位符颜色设为红色，文本为绿色。

问题在于您使用的是HTML5“占位符”属性，浏览器默认会淡出该属性（例如，Firefox将

占位符的
不透明度设置为
文本为
.54
），因此，在您的示例中，它在背景中显示为略带橙色

试试这个

您还可以通过
jQuery
尝试执行此操作，方法是使用
.focus（）
和
.blur（）
函数，当用户单击
输入时添加和删除“搜索…”文本，这也适用于不支持
占位符
属性的浏览器。
可能重复：）+1此外，您可能希望为我们树立榜样，而不是树立榜样。
#FFF
，而不是树立榜样。
#999
@SørenJepsen太棒了！很高兴有帮助：如果你觉得合适，请考虑投票和标记作为答案！当然是杰斯！现在，我所能做的就是把答案记下来。“现在不能投票了。”瑟伦·耶普森很好奇为什么你决定把被接受的答案从我的改成本·D的？您是否需要使用jQuery方法来实现您的解决方案？
::-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;
}

#s::-webkit-input-placeholder { /* WebKit browsers */
    color:    #FFF;
}

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

:-moz-placeholder { /* Firefox 18- */
   color: #fff;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #fff;
}

:-ms-input-placeholder {  
   color: #fff;  
}