Html 搜索表单占位符文本在浏览器之间不一致

Html 搜索表单占位符文本在浏览器之间不一致,html,css,wordpress,search,input,Html,Css,Wordpress,Search,Input,我正在处理我的wordpress搜索表单,我似乎无法在不同的浏览器中获得关于文本的任何一致性。它在chrome、firefox和safari之间改变颜色和粗体。这仅在占位符文本中发生 任何人都有让我的搜索表单占位符文本在浏览器之间保持一致的解决方案。看看下面我的代码 <form method="get" id="searchform" class="searchform wpex-searchform" action="<?php echo esc_url( home_url( '/

我正在处理我的wordpress搜索表单,我似乎无法在不同的浏览器中获得关于文本的任何一致性。它在chrome、firefox和safari之间改变颜色和粗体。这仅在占位符文本中发生

任何人都有让我的搜索表单占位符文本在浏览器之间保持一致的解决方案。看看下面我的代码

<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中没有针对占位符文本本身

摘自答案链接:

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