Question

这是我到目前为止的代码：

HTML：

<!DOCTYPE html>
...
<form>
    <input type="image" value=" " class="btnimage" />
</form>
...

CSS：

.btnimage {
    width: 80px;
    height: 25px;
    background:url('C:/Users/John/Desktop/Misc Things for the CoD Ghosts Site/SubmitButton.png');
}
.btnimage:hover {
    background-position: 0 -25px;
    background:url('C:/Users/John/Desktop/Misc Things for the CoD Ghosts Site/SubmitButtononHover.png');
}

上面的代码有效，但是按钮周围有一个边框，我想要离开。到目前为止，我已经尝试将background-border:0;添加到这两个类中，但它不起作用。

Answer 1

试

input {
    /* sets border width to 0 and border style to none */ 
    border:0 none;
}

或

input {
    border: 0px solid black;
}

Answer 2

background-border is not a css property

您可以通过将宽度设置为0或将其样式设置为无来删除带有css的边框。

要避免Internet Explorer遗留错误，您必须指定border-width或border-color以使border-style:none适用。所以，如果你关心我的奶奶，最好的选择是使用border:0 none;

.btnimage {
    border: 0 none;
    width: 80px;
    height: 25px;
    background:url('C:/Users/John/Desktop/Misc Things for the CoD Ghosts Site/SubmitButton.png');
}

由于您未提及边框何时可见，因此可能会在输入焦点上显示轮廓。

如果是您的情况，请添加：

.btnimage:focus {
    outline:0
}

Answer 3

这里的主要问题是你定义了一个输入类型=“图像”，但没有提供一个源，所以这个边框就像一个破碎的图像，因为当你将类型设置为图像时，输入也需要一个src属性

在我看来，你有2个解决方案：

1st：在HTML代码中设置输入的“src”属性，如果要更改悬停图像，可以通过javascript执行此操作。

<!DOCTYPE html>
...
<form>
    <input type="image" src="your_image_url" class="btnimage" />
</form>
...

第二：将其更改为输入类型“按钮”或链接“”，而不是删除CSS中的边框和背景。

<!DOCTYPE html>
...
<form>
    <input type="button" class="btnimage" />
</form>
...

示例：http://jsfiddle.net/Bpv34/

Answer 4

CSS

border:none none;

是的，

Answer 5

input {
  border:0 none !important;
  outline:0 !important;
}

Answer 6

要删除边框，请在CSS中的任何位置写下以下行：

outline: 0;

Answer 7

尝试前缀

input {

    border:0 none;
    -moz-border:0 none;   
    -webkit-border:0 none;  
     outline: 0;  //add this too
}

Answer 8

试试这个

input {
  border:0 none !important;
}

通过写作重要，它肯定会起作用。

Answer 9

1）使用src属性定义图像URL。

2）使用带div的自定义按钮 - 例如：

<div class="btnimage" onclick="blablabla()">Button</div>

它可以解决问题。

Answer 10

这最终对我有用。所有带有“边界”的尝试都不起作用：

input { outline: 0 !important; }

Answer 11

我也遇到了麻烦。首先，如果您使用输入类型“图像”，您也可以将src设置为您想要使用的图像

这是我的：<input type='image' src='img/share.png' alt='Share'>

然后在你的CSS中进行调整：

#fbshare input[type="image"] {outline:none;}
#fbshare input[type="image"]:active {outline:none;}

这解决了我在Chrome中的问题，我认为它也应该解决你的问题。如果它在将近2年后仍然存在问题。（我主要是为在谷歌搜索中找到此页面的其他人发布此内容）

这页帮助我得出了上述结论。 http://themeforest.net/forums/thread/remove-border-after-clicking-button/33948

Answer 12

我遇到了与OP相同的问题-特别是对于图像输入。如果没有设置src属性，那肯定是因为浏览器将其解释为“残破的图像”。

因此，这是一种解决方案，通过将属性设置为单个透明像素，图像输入的非边框非轮廓“边框”将消失：

<input type="image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="btnimage">

不需要CSS（或似乎可以使用）

从输入类型图像按钮中删除边框？

12 个答案: