Html 从按钮中删除边框

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11497094/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 01:40:28  来源:igfitidea点击:

Remove border from buttons

htmlcssbutton

提问by JamesonW

I tried to create buttons and insert my own images instead of the standard button images. However, the gray border from the standard buttons still remains, showing on the outside of my black button images.

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

Does anyone know how to remove this gray border from the button, so it's just the image itself? Thank you.

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

回答by Vestride

Add

添加

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

to your buttons.

到你的按钮。

Demo:

演示:

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

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

回答by Daniel Lee

This seems to work for me perfectly.

这似乎对我很有效。

button:focus { outline: none; }

回答by Flea

I was having the same problem and even though I was styling my button in CSS it would never pick up the border:nonebut what worked was adding a style directly on the input button like so:

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

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

回答by Filipe Manuel

Try using: border:0;or border:none;

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

回答by yadutaf

The usual trick is to make the image itself part of a link instead of a button. Then, you bind the "click" event with a custom handler.

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

Frameworks like Jquery-UI or Bootstrap does this out of the box. Using one of them may ease a lot the whole application conception by the way.

像 Jquery-UI 或 Bootstrap 这样的框架开箱即用。顺便说一下,使用其中之一可以大大简化整个应用程序的概念。

回答by yadutaf

You can also try background:none;border:0pxto buttons.

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

also the css selectors are div#yes button{..}and div#no button{..}. hopes it helps

css 选择器也是div#yes button{..}div#no button{..}。希望它有帮助

回答by Kailas

For removing the default 'blue-border' from button on button focus:

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

In Html:

在 HTML 中:

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

And in Css

而在 CSS 中

button.new-button:focus {
    outline: none;
}

Hope it helps :)

希望能帮助到你 :)

回答by KenDev

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

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