1

这个按钮在 CSS Sprites 之前

<input type="image" src="/images/search-button.png" value="" id="search-button">

我正在尝试使用我的一种搜索表单来实现 CSS Sprites，问题是如果我使用

<input id="search-button" class="sprites1" type="submit" value="">

它看起来像这样。

在此处输入图像描述

如您所见，右侧的图像看起来不正确，但它是可点击的。

然后我尝试了

<span id="search-button" class="sprites1"></span>

在此处输入图像描述

然后它看起来正确！但！！我不能点击它。

所以这是我的 CSS sprites 代码。

我必须实施什么才能让它看起来像我想要的那样，我可以点击它？

 .sprites1 {
        background: url('result.png');
    }
#search-button {background-position: -0px -462px; 

                width:16px; height:16px; float:right; }
4

1 回答 1

1

这里的问题是浏览器在元素上使用的默认 css。您应该尝试重置该css。我经常使用以下代码段：

/*  reset css of buttons */
.cssresetbutton {
    border-width: 0px;
    border-style: none;
    background: inherit;
    font: inherit;
    color: blue;
    padding: 0px; }

.cssresetbutton:active {
    border-width: 0px;
    border-style: none;
    background: inherit;
    outline: 0;
    box-shadow: none; }

尝试将cssresetbutton类添加到您的输入元素，看看它是否有效。

编辑： 您也可以尝试不使用 input[type=submit] 元素。例如：

<span id="search-button" class="sprites1" onClick="document.getElementById('formid').submit()"></span>

单击时它将提交 form#formid 元素。

于 2012-05-01T21:47:36.930 回答