提交按钮有斜面我无法摆脱

Posted 2023-02-22

【中文标题】提交按钮有斜面我无法摆脱

【英文标题】：Submit button has bevel I cant get rid of

【发布时间】：2010-10-25 17:00:40

【问题描述】：

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

【参考方案1】：

您需要像这样删除边框（斜角）：

input 
    border: 0;

【参考方案2】：

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

  border: 1px solid black;

看起来不错。

【参考方案3】：

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

【讨论】：

赞成，以回应有关 UI 的良好建议。不是，我接受，回答这个问题，但绝对值得建议。

我也是+1，我应该提一下。这是一个有效的观点。但有时客户就是不让步。

您当然需要小心。但在我看来，反对改变外观的一揽子建议并不是一个好建议。而且它没有回答这个问题。

你应该完全改变按钮的外观。默认浏览器样式很难看。您不需要可用性测试。

【参考方案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;

【参考方案5】：

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

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

（你当然可以把它移到你的样式表中。）

【参考方案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

【参考方案7】：

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

对我有用的 CSS 是：

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

边框：0；删除 3D 斜面（边框样式），然后我将其替换为在 IE8 和 Chrome 中都能很好呈现的扁平边框。

【参考方案8】：

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

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

从按钮上删除了最后一点灰色。

【参考方案9】：

您可以在样式表中（或在页面上的 <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");

【参考方案10】：

请注意，Safari 对提交按钮的样式非常固执。

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

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

【参考方案11】：

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

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