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

Question

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

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