Html 提交按钮有斜角我无法摆脱
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/855222/
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
Submit button has bevel I cant get rid of
提问by Graham
I am trying to get rid of the default bevel and border that most browsers/OS have set as the default on Submit buttons. When I use CSS to add a background image it just displays the image in the background of the button but the bevel is still there. Is there a way to make the button just display just my image? Is the only way to do that to set the image path in the src tag of the html input element?
我试图摆脱大多数浏览器/操作系统在提交按钮上设置为默认值的默认斜角和边框。当我使用 CSS 添加背景图像时，它只会在按钮的背景中显示图像，但斜角仍然存在。有没有办法让按钮只显示我的图像？在 html 输入元素的 src 标签中设置图像路径是唯一的方法吗？
回答by janhartmann
You will need to remove the border (bevel) like so:
您需要像这样删除边框（斜角）：
input {
border: 0;
}
回答by kristina
You can set border attributes in CSS. I always think
您可以在 CSS 中设置边框属性。我总觉得
border: 1px solid black;
looks nice.
看起来不错。
回答by Zian Choy
I would not recommend changing the appearance of the button because it will not be consistent with the way other buttons on websites look and will be harder for users to find and recognize as a submit button. If you really want to go ahead, I strongly recommend doing a usability test.
我不建议更改按钮的外观，因为它与网站上其他按钮的外观不一致，并且用户更难找到并识别为提交按钮。如果你真的想继续，我强烈建议你做一个可用性测试。
回答by Clayton
If you want to use your own button image, then you will need to define your own buttons, like this:
如果要使用自己的按钮图像，则需要定义自己的按钮，如下所示：
<div class="button">
<a href="#">Login</a>
</div>
And the CSS:
和 CSS：
div.button
{
position: relative;
display: block;
float: left;
margin: 0;
border: 0;
padding: 0;
background: url(button_right_normal.gif) no-repeat right top;
}
div.button a
{
position: relative;
display: block;
margin: 0;
border: 0;
padding: 2px 15px 5px 15px;
height: 18px;
background: url(button_left_normal.gif) no-repeat left top;
color: #ffffff;
font-size: 11px;
text-decoration: none;
}
回答by Laurence Gonsalves
You can remove the border using the border CSS properties. For example:
您可以使用边框 CSS 属性删除边框。例如：
<input type=button value="Hello" style="border:0">
(You can of course move this into your stylesheet.)
（你当然可以把它移到你的样式表中。）
回答by Csiga
You can use ANY img as background(for example transparent rounded corners), just in the css add "background-color: transparent;"
您可以使用任何 img 作为背景（例如透明圆角），只需在 css 中添加“background-color: transparent;”
HTML(standard offical "submit" button) - nothing special(I don't like mixing code with style):
HTML（标准的官方“提交”按钮）-没什么特别的（我不喜欢将代码与样式混合）：
<input type="submit" name="submit" id="mystyle" value="send e-mail"/>
then in css(same as a normal link except kill borders, and default background)
然后在 css 中（与普通链接相同，除了终止边框和默认背景）
#mystyle {
background-color: transparent;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
Without CSS like the offical submit button, with CSS whatever you designed.
没有像官方提交按钮这样的 CSS，无论你设计什么，都可以使用 CSS。
Tested: Chrome, IE, Opera
测试：Chrome、IE、Opera
回答by Ian Robertson
I was having the same problem on input buttons. For once IE8 was appearing like I wanted "out-of-the-box" and it was Chrome that disappointed!
我在输入按钮上遇到了同样的问题。有一次 IE8 看起来就像我想要“开箱即用”一样，而让 Chrome 失望的是！
The CSS that did the trick for me was:
对我有用的 CSS 是：
input[type="button"] {
border: 0;
border-width: 2px;
border-color: white;
border-style: solid;
}
border: 0; removes the 3D bevel (border style), then I replace it with a flat looking border which renders nicely in both IE8 and Chrome.
边框：0；删除 3D 斜面（边框样式），然后我将其替换为在 IE8 和 Chrome 中都能很好呈现的扁平边框。
回答by Jonk
I was looking for the answer, saw this and decided to weigh in after I figured out the fix. All the answers below are correct and helpful up to the point that a small grey border is still visible.
我正在寻找答案，看到了这个，并决定在我找到解决办法后权衡。下面的所有答案都是正确且有帮助的，直到仍然可以看到一个小的灰色边框。
No one mentioned: background-size: cover;
没有人提到：背景尺寸：封面；
Which removed the final bit of grey from the button.
这从按钮上删除了最后一点灰色。
回答by Scott
You can something like the following to a stylesheet (or within at <style>...</style>tag on the page) and use some advanced CSS selectors:
您可以在样式表（或<style>...</style>页面上的at标记内）中使用类似以下内容并使用一些高级 CSS 选择器：
input[type=submit], input[type=button], /* Advanced CSS selectors */
input.button /* For older browsers you can add a 'button' class to each button where you want a bkg img */
{
border: 0;
background-image: url("/images/foo.png");
}
回答by alex
Note that Safari is very stubborn with styling submit buttons.
请注意，Safari 对样式提交按钮非常固执。
<button type="submit"></button>
Is more flexible. However, if you're using multiple buttons in a form, IE6 has problems. IE also submits the innerHTMLof the button element, whilst Firefox submits the valueattribute (which makes more sense to me).
更灵活。但是，如果您在一个表单中使用多个按钮，IE6 就会出现问题。IE 还提交innerHTML按钮元素的 ，而 Firefox 提交value属性（这对我来说更有意义）。
