输入按钮图像在提交时消失

Question

我有一个表格：

<form action="/search" class="search-form" method="get">
    <fieldset>
        <input id="q" name="q" type="text" value="Enter search text here">
        <input type="submit" value="search" class="search-button">
    </fieldset>
 </form>

用一些 CSS 来设置按钮的样式：

.search-button
{
    background:url("images/search.gif") no-repeat 0 center;
    text-indent: -9000px;
    border:none;
    display:inline-block;
    width: 23px;
    background-position-y: 4px;
    background-position-x: 5px;
}
.search-button:hover
{
    background:url("images/search.gif") no-repeat 0 center;
    text-indent: -9000px;
    border:none;
    display:inline-block;
    width: 23px;
    background-position-y: 4px;
    background-position-x: 5px;
    opacity:.8;
}

当我将鼠标悬停在按钮上时，不透明度会按预期变化。

如果我单击该按钮并将鼠标指针移开，该按钮将在下一页加载时变为灰色方块。

这是怎么回事？

Answer 1

尝试添加 active 状态的样式也是这样:

.search-button:active {...}

@Solution Updates:

添加 :default 状态修复问题。

Answer 2

以下代码片段似乎有效，因此很难重现该问题。

.search-button中的规则在.search-button:hover中得到继承，无需重复，见下文。

注意： background-position-y 和 background-position-x 是无效的 CSS 属性。

参见参考文献：http://www.w3.org/TR/css3-background/#the-background-position

.search-button {
  background: url("http://placehold.it/50x25") no-repeat 0 center;
  text-indent: -9000px;
  border: none;
  display: inline-block;
  width: 23px;
}
.search-button:hover {
  opacity: .8;
}

<form action="#" class="search-form" method="get">
  <fieldset>
    <input id="q" name="q" type="text" value="Enter search text here">
    <input type="submit" value="search" class="search-button">
  </fieldset>
</form>

输入按钮图像在提交时消失

Input button image disappears on submit

html

css

styling