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

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

1 个答案: