Question

我正在尝试摆脱大多数浏览器/操作系统在“提交”按钮上设置为默认值的默认斜角和边框。当我使用CSS添加背景图像时，它只是在按钮的背景中显示图像，但斜角仍然存在。有没有办法让按钮只显示我的图像？唯一的方法是在html输入元素的src标记中设置图像路径吗？

Answer 1

您将需要删除边框（斜角），如下所示：

input {
    border: 0;
}

Answer 2

您可以在CSS中设置边框属性。我一直认为

  border: 1px solid black;

看起来不错。

Answer 3

我不建议更改按钮的外观，因为它与网站上的其他按钮的外观不一致，并且用户更难以找到并识别为提交按钮。如果您真的想继续，我强烈建议您进行可用性测试。

Answer 4

如果您想使用自己的按钮图像，则需要定义自己的按钮，如下所示：

<div class="button">
  <a href="#">Login</a>
</div>

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;
}

Answer 5

您可以使用边框CSS属性删除边框。例如：

<input type=button value="Hello" style="border:0">

（您当然可以将其移到样式表中。）

Answer 6

你可以使用任何img作为背景（例如透明圆角），只需在css中添加“background-color：transparent;”

HTML（标准官方“提交”按钮） - 没什么特别的（我不喜欢用代码混合代码）：

<input type="submit" name="submit" id="mystyle" value="send e-mail"/>

然后在css中（与除了杀死边界和默认背景之外的普通链接相同）

#mystyle {
background-color: transparent;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

没有像官方提交按钮那样的CSS，无论你设计的是什么CSS。

经过测试：Chrome，IE，Opera

Answer 7

我在输入按钮上遇到了同样的问题。一旦IE8看起来像我想要“开箱即用”，那就是Chrome让人失望！

为我做这招的CSS是：

input[type="button"] {
    border: 0;
    border-width: 2px;
    border-color: white;
    border-style: solid;
}

border：0;删除3D斜面（边框样式），然后我用一个平坦的边框替换它，在IE8和Chrome中都可以很好地呈现。

Answer 8

您可以在样式表中（或在页面上的<style>...</style>标记内）使用以下内容，并使用一些高级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");
}

Answer 9

请注意，Safari使用样式提交按钮非常顽固。

<button type="submit"></button>

更灵活。但是，如果您在表单中使用多个按钮，则IE6会出现问题。 IE也提交了按钮元素的innerHTML，而Firefox提交了value属性（这对我来说更有意义）。

Answer 10

我认为您可以指定按钮和提交按钮的外观：

input[type=button], input[type=submit] { border: 0 }

Answer 11

我一直在寻找答案，看到了这个答案，并在找出解决办法后决定权衡一下。下面的所有答案都是正确的，并且可以帮助您看到灰色的小边框。

没有人提及：背景尺寸：封面；

从按钮上去除了最后的灰色。

提交按钮已经斜面我无法摆脱

11 个答案: