Style search box

Question

I'm desperately trying to change the font color (to white) of "search..." text in my search-bar. But I only manage to change the input text. (see link: http://12hrs.net/blog/).

Hope you can help me

The php looks like this:

<?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>

and css like this:

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

Possible duplicate http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css — Sourabh, May 28 '13 at 04:07

score 1 · Answer 1 · edited May 23 '17 at 12:28

Looking at your HTML, you're using the placeholder attribute:

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

The issue is that the color of the text IS set to white, but the color of the PLACEHOLDER text is still grey. This can be changed by targeting it using the following selectors:

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

The ID of your search box is "s", so you can specifically target it by prefixing these selectors with #s. Example:

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

NOTE:
Bear in mind, it seems you must define ALL of these styles or the whole group is ignored. Please read more at this question: Change an HTML5 input's placeholder color with CSS

JSFiddle:
http://jsfiddle.net/qjRNR/ - Made Placeholder color red, text green.

Beat me to it :) +1 Also, you might want to set your example to us `#FFF` instead of `#999`. — Ben D, May 28 '13 at 04:12
@SørenJepsen Great! Glad to have helped :) If you feel it appropriate, please consider upvoting and marking as answer! — Jace, May 28 '13 at 04:26
@Jace of course! Right now, all I can do is to mark as answered. Can't upvote at the moment. — Søren Jepsen, May 28 '13 at 04:32
@SørenJepsen curious as to why you decided to change the accepted answer from my answer to Ben D's? Did you need to use the jQuery approach to achieve your solution? — Jace, Jul 03 '13 at 00:34

score 0 · Accepted Answer · answered May 28 '13 at 04:11

The issue is that you're using an HTML5 "placeholder" property, which browsers fade out by default (Firefox, for instance, sets the opacity of placeholder text to .54), so it appears slightly orange against the background in your example.

Try this (from 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;  
}

You can also try doing this through jQuery by having an .focus() and .blur() function which add and remove the "Search..." text when the user clicks in the input, which will also work for browsers that don't support the placeholder property.

Style search box

2 Answers2