Search Form Place Holder Text Incosistent Between Browsers

Question

I'm working on my wordpress search form and I can't seem to get any consistency across different browsers with regards to the text. It changes color and boldness between chrome, firefox and safari. This is only happening with the placeholder text.

Anyone have a solution for making my search form placeholder text consistent between browsers. Take a look at my code below.

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

<input type="search" class="field" name="s" value="<?php echo esc_attr( get_search_query() ); ?>" id="s"  placeholder="The Appreciation of Beauty and Good Taste..."/>

<button type="submit" class="submit" id="searchsubmit"><img src="<?php bloginfo('template_url'); ?>/images/search.png" alt="Search"/></button>

</form>

CSS

input[type="search"] {
    background: #FFFFFF;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: 1px solid #E8E8E8;
    font: 11px 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #BBB;
    font-weight: 500;
    display: block;
    padding: 7px 10px;
    width: 100%;
    -webkit-appearance: none !important;
    border-radius: 4px;
    box-shadow: 0px 1px 2px #ccc;
    max-width: 300px;
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

input[type="search"]::-webkit-search-decoration {
    display: none;
}

input[type="search"]:focus {
    outline: none;
}

.wpex-searchform {
position: relative;
}

.wpex-searchform #searchsubmit {
border: none;
outline: none;
background: none;
-webkit-appearance: none;
position: absolute;
right: 5px;
top: 50%;
font-size: 12px;
margin-top: -10px;
cursor: pointer;
}

.wpex-searchform #searchsubmit:hover {
}

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

This might help. It looks like you aren't targeting the placeholder text itself in your CSS.

Taken from the answer link:

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

Search Form Place Holder Text Incosistent Between Browsers

1 Answers1