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更新：

添加: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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: