45

我想为我的网络应用程序创建一个搜索功能。

这是 FF 和 IE 上的外观，没有奇怪的边框是可以的

火狐

在此处输入图像描述

IE

在此处输入图像描述

这是 Chrome 和 Safari 上的外观，输入元素周围有奇怪的边框

铬合金

在此处输入图像描述

苹果浏览器

在此处输入图像描述

这是我的 html & css 代码

<input type="search" id="generic_search" onkeypress="return runScript(event)" />
<input type="button" id="generic_search_button" />

已border:0应用于所有元素

在此处输入图像描述

#generic_search
{
    font-size: 14px;
    width: 250px;
    height: 25px;
    float: left;
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 7px;
}
#generic_search_button
{
    float: left;
    width: 25px;
    height: 25px;
    margin-top: 7px;
    cursor: pointer;
    background-color: White;
    background-image: url(/Images/search.png);
    background-repeat: no-repeat;
    background-position: center center;
}

怎么去掉那个边框？

4

8 回答 8

78

border: 0应该足够了，但如果不是，那么按钮的浏览器默认样式可能会干扰。您是否尝试设置appearance为none（例如-webkit-appearance: none）

于 2013-01-31T05:13:43.823 回答
24 
border-width:0px;
border:none;

我用过这个，在大多数浏览器（Chrome、Safari、FF、IE 等）中，它对我来说都很好

于 2013-01-31T03:46:03.570 回答
22

这很简单

input {border:0;outline:0;}
input:focus {outline:none!important;}
于 2019-03-04T21:03:46.757 回答
11

在我的情况下，我使用的是一个 CSS 框架，它添加了box-shadow，所以我还必须添加

box-shadow: none;

所以完整的片段是：

border: none; 
border-width: 0; 
box-shadow: none;
于 2017-09-26T23:21:26.947 回答
2

你的代码看起来像这样 jsfiddle.net/NTkGZ/

尝试

border:none;
于 2013-01-31T05:10:34.507 回答
1

我有时使用此 css 代码来删除焦点输入边框。希望对您有所帮助-：

  input:focus, textarea:focus, select:focus{
    outline: none;
}
于 2021-05-18T08:52:37.583 回答
0

试试这个

#generic_search_button
{
    float: left;
    width: 24px; /*new width*/
    height: 24px; /*new width*/
    border: none !important; /* no border and override any inline styles*/
    margin-top: 7px;
    cursor: pointer;
    background-color: White;
    background-image: url(/Images/search.png);
    background-repeat: no-repeat;
    background-position: center center;
}

我认为图像尺寸可能是错误的

于 2013-01-31T04:04:53.923 回答
-1

使用这个我希望这对你有帮助...边框：无！重要；背景颜色：透明；

试试这个

<div id="generic_search"><input type="search" onkeypress="return runScript(event)" /></div>
<button type="button" id="generic_search_button" /></button>
于 2013-01-31T03:54:50.967 回答