2

我正在拼命地尝试在我的搜索栏中更改“搜索...”文本的字体颜色（变为白色）。但我只设法更改输入文本。（见链接：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;
}
4

2 回答 2

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/ - 占位符颜色为红色，文本为绿色。

于 2013-05-28T04:05:23.743 回答
0

问题是您使用的是 HTML5“占位符”属性，默认情况下浏览器会淡出（例如，Firefox 将opacitytextplaceholder设置为.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()and.blur()函数来执行此操作，该函数在用户单击 时添加和删除“搜索...”文本input，这也适用于不支持该placeholder属性的浏览器。

于 2013-05-28T04:11:43.333 回答