Question

我正在尝试使用CSS来制作包含图像的sumbit按钮。这是代码：

HTML

<input type="submit" id="search" name="submit" alt="search" >

CSS

input#search{
    background:url(../search-icon.png);
    background-repeat: no-repeat;
    width:40px;
    height:40px;
}

这会返回此提交按钮，但我不希望出现“提交”或灰色方框这样的字词。

如果有人能够提出问题的原因，我们将不胜感激。

Answer 1

灰色框是由添加到提交按钮的默认边框引起的。而提交文本是按钮的默认值。

HTML：

<input type="submit" id="search" name="submit" alt="search" value="">

CSS：

input#search    {
background:url(../search-icon.png);
background-repeat: no-repeat;
width:40px;
height:40px;
border: 0;
}

Answer 2

将带有空字符串的value添加到输入：

<input type="submit" id="search" name="submit" alt="search" value="">

Answer 3

而不是输入type="submit"，您可以使用输入type="image"

使用这一行代码

<input type="image" src="submit.gif" alt="Submit" width="48" height="48">

请参阅DEMO

Answer 4

您可以使用CSS text-indent移开文字：

input#search {
    background:url(../search-icon.png);
    background-repeat: no-repeat;
    width:40px;
    height:40px;
    text-indent:-999px
}

https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

Answer 5

设置输入类型提交的空白值，如下所示：

<input type="submit" id="search" name="submit" alt="search" value="" >

Answer 6

试试这个

input#search {
background:url(../search-icon.png) no-repeat;
width:40px;
height:40px;
text-indent:50px;
overflow:hidden;
}

Answer 7

<!DOCTYPE html>
<html>
       <head>
       <style>
            input.search{
                background-image:url(url.jpg);
                text-indent:-9999px;
                width: 100px;
                height: 30px;
                border:2px solid rgb(0,102,153);
           }
       </style>
       </head>

       <body>
       <input type="submit" class="search" alt="search">
</body>
</html>

enter image description here

Answer 8

我发现这是最完整的解决方案：

#submitbutton {
    background-image: url(http://paulabrown.net/search-button-png-210.png);
    background-repeat: no-repeat;
    height: 24px; // height of image
    width: 24px; // width of image
    padding: 0;
    border: none; // get rid of grey border
    color: transparent; // hide the text (without indenting it to hell)
    background-color: transparent;
    outline: none;
    display: block; // Ensure block element to apply this to inline-elements
}

Answer 9

html: <input type ="submit" value ="" class="search-button"/>
CSS:
.search-button
{
    background-image: url("/images/search.png");
    background-repeat: no-repeat;
    min-width: 52px;
    min-height: 20px;
    width:52px;
    height: 20px;
    border:0;
}

使用CSS添加图像以提交按钮

9 个答案: