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

【问题标题】：Search Form Place Holder Text Incosistent Between Browsers搜索表单占位符文本在浏览器之间不一致
【发布时间】：2014-06-03 03:18:52
【问题描述】：

我正在处理我的 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

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 {
}

【问题讨论】：

标签： html css wordpress search input

【解决方案1】：

This 可能会有所帮助。看起来您没有在 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;
}

【讨论】：