从按钮中删除边框

Posted 2023-02-22

【中文标题】从按钮中删除边框

【英文标题】：Remove border from buttons

【发布时间】：2012-07-14 20:59:47

【问题描述】：

我尝试创建按钮并插入我自己的图像而不是标准按钮图像。但是，标准按钮的灰色边框仍然存在，显示在我的黑色按钮图像的外部。

有谁知道如何从按钮上删除这个灰色边框，所以它只是图像本身？谢谢。

【问题讨论】：

试试-webkit-appearance: inherit; 或-webkit-appearance:initial

@Brut：我可能错了，但这看起来是特定于我的浏览器，我很确定 Jameson 想要一些适用于所有现代浏览器的东西。

【参考方案1】：

你可以很容易地给它这个样式：

MyButton 
border: none;
outline: none;
background: none;

border: none; 也将单独为您完成工作而不给出轮廓（因为：轮廓是在元素边框之外绘制的一条线。所以当没有边框时，outline 属性本身没有任何意义)。

背景速记 CSS 属性一次设置所有背景样式属性，例如颜色、图像、原点和大小，或重复方法。因此，当您将其值设置为none 时，它会阻止您的按钮具有任何颜色、图像等......

【参考方案2】：

$(".myButtonClass").css(["border:none; background-color:white; padding:0"]);

【讨论】：

这个人要求的是css代码而不是jQuery代码。

【参考方案3】：

只需使用： buttonborder:none; outline:none;

【讨论】：

欢迎来到 ***。虽然您的代码 sn-p 可能会回答这个问题，但提供有关您的代码 sn-p 为何和/或如何工作的额外上下文可以提高其长期价值。此外，它似乎与接受的答案没有太大区别......

【参考方案4】：

您可以像这样在 CSS 样式中定位按钮：

 div button 
    border: none;
 

【参考方案5】：

input[type="button"] 
border: none;
outline:none;

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review

【参考方案6】：

将此添加为 css，

button[type=submit]border:none;

【参考方案7】：

用于从按钮焦点上的按钮中删除默认的“蓝色边框”：

在 html 中：

<button class="new-button">New Button...</button>

在 Css 中

button.new-button:focus 
    outline: none;

希望对你有帮助:)

【参考方案8】：

添加

padding: 0;
border: none;
background: none;

到你的按钮。

演示：

https://jsfiddle.net/Vestride/dkr9b/

【讨论】：

我很感激.. 但我就像你对样式表说的那样添加了，不幸的是它没有工作。我应该直接将它嵌入到 html 中，如果这会有所作为吗？

我在按钮上加了一个小提琴加background: none;。在小提琴上达到顶峰，看看它是否适合你。

【参考方案9】：

这似乎对我很有效。

button:focus  outline: none; 

出于可访问性原因，不建议使用

outline:none;。如果必须移除焦点边框，请提供另一种方式让用户看到它有焦点。 outlinenone.com

对上一条评论的另一个观点是按钮不一定要保持焦点。如果单击它并执行操作，则焦点不应保留。

@Octopus 如果有人不能移动鼠标指针直接点击按钮，而是需要通过表单控件来切换到有问题的按钮，那么他们将需要一些提示在激活它之前知道他们已经到达了正确的按钮。

注意：一般来说，有些网站倾向于让所有用户都能看到大纲可见性，尤其是残疾用户。但是，有些网站不喜欢显示大纲，这实际上取决于您的网站设计和网站受众。例如，对于内部管理面板，您可以随心所欲，因为您已经知道您的网站用户是谁，并且管理面板是不公开的私人网站。

此外，在高度图形化的网页上，有时项目在没有轮廓的情况下看起来会更好，就像那些故事书网站一样，我相信我们都看到它们类似于电脑游戏设计。

【参考方案10】：

我遇到了同样的问题，即使我在 CSS 中设置按钮的样式，它也永远不会选择 border:none，但有效的是直接在输入按钮上添加样式，如下所示：

<div style="text-align:center;">
    <input type="submit" class="SubmitButtonClass" style="border:none;" value="" />
</div>

【讨论】：

您正在使用 CSS 级联来使用内联样式覆盖属性。您应该查看一些关于 CSS 级联和 CSS 特性的文章。

【参考方案11】：

您也可以尝试background:none;border:0px 按钮。

css 选择器还有 div#yes button.. 和 div#no button.. 。希望对你有帮助

【讨论】：

您也可以将按钮的背景设置为图像，而不是使用img标签

或者用纯css做。喜欢background:#555; font-weight:bold: color:#fff; padding:6px 8px;

【参考方案12】：

通常的技巧是使图像本身成为链接而不是按钮的一部分。然后，将“click”事件与自定义处理程序绑定。

Jquery-UI 或 Bootstrap 等框架开箱即用。顺便说一句，使用其中之一可能会大大简化整个应用程序的概念。

【参考方案13】：

尝试使用：border:0; 或 border:none;

【讨论】：

#button 边框：无；这似乎工作得很好。