CSS：使用输入按钮图像实现CSS Sprites

Question

此按钮位于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; }

Answer 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 类添加到输入元素中，看看它是否有效。

修改 您也可以尝试不使用输入[type = submit]元素。例如：

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

单击时将提交表单#formid元素。