Question

我拼命想在我的搜索栏中更改“搜索...”文字的字体颜色（白色）。但我只设法更改输入文本。（见链接：http://12hrs.net/blog/）。

希望你能帮助我

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>

和css是这样的：

.search #s,.search #search{
    background:url('../img/theme/search.png') 12px center no-repeat #e34b4b;
    width: 100%;
    padding-left: 40px;
    color: white;
}

Answer 1

查看您的HTML，您使用的是placeholder属性：

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

问题是文本的颜色设置为白色，但PLACEHOLDER文本的颜色仍为灰色。这可以通过使用以下选择器进行定位来更改：

::-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;
}

您的搜索框的ID为“s”，因此您可以通过在这些选择器前加#s作为前缀来专门定位它。例如：

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

注意：
请记住，似乎您必须定义所有这些样式或忽略整个组。请在此问题上阅读更多内容：Change an HTML5 input's placeholder color with CSS

JSFiddle：
http://jsfiddle.net/qjRNR/ - 将占位符颜色设置为红色，文字为绿色。

Answer 2

问题在于您使用的是HTML5“占位符”属性，默认情况下浏览器会淡出（例如，Firefox会将opacity文本的placeholder设置为.54 ），所以它在你的例子中显示为略微橙色的背景。

试试这个（来自http://css-tricks.com/snippets/css/style-placeholder-text/

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

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

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

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

您也可以尝试通过jQuery .focus()和.blur()功能在用户点击{input时添加和删除“搜索...”文字。 1}}，也适用于不支持placeholder属性的浏览器。

样式搜索框

2 个答案: