Html 使用 CSS 添加图像以提交按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20904817/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding an image to submit button using CSS
提问by JCW
I'm attempting to use CSS in order to make a sumbit button containing an image. Here's the code:
我正在尝试使用 CSS 来制作一个包含图像的 sumbit 按钮。这是代码：
HTML
HTML
<input type="submit" id="search" name="submit" alt="search" >
CSS
CSS
input#search{
background:url(../search-icon.png);
background-repeat: no-repeat;
width:40px;
height:40px;
}
This returns this submit button, but I don't want the word 'submit' or the gray square box to appear.
这将返回此提交按钮，但我不希望出现“提交”一词或灰色方框。
If anyone could suggest what the problem might be, it would be greatly appreciated.
如果有人可以提出问题可能是什么，将不胜感激。
回答by jfelsinger
The gray box is caused by a default border being added to the submit buttons. Whereas the submit text is the default value for the button.
灰色框是由添加到提交按钮的默认边框引起的。而提交文本是按钮的默认值。
HTML:
HTML：
<input type="submit" id="search" name="submit" alt="search" value="">
CSS:
CSS：
input#search {
background:url(../search-icon.png);
background-repeat: no-repeat;
width:40px;
height:40px;
border: 0;
}
回答by Bud Damyanov
Add valuewith empty string to the input:
将value空字符串添加到输入：
<input type="submit" id="search" name="submit" alt="search" value="">
回答by AmanS
回答by Asraful Haque
<!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>
回答by d4nyll
I find this to be the most complete solution:
我发现这是最完整的解决方案：
#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
}
回答by Sudhi
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;
}
回答by SpiderCode
Set blank Value of the input type submit as shown below :
设置输入类型 submit 的空白值，如下所示：
<input type="submit" id="search" name="submit" alt="search" value="" >
回答by putvande
You can use CSS text-indentto move the text away:
您可以使用 CSStext-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
https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent
回答by Adeel Khanzada
try this
尝试这个
input#search {
background:url(../search-icon.png) no-repeat;
width:40px;
height:40px;
text-indent:50px;
overflow:hidden;
}
