删除html输入周围的边框

Question

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

以下是FF＆amp; IE，没有奇怪的边框就可以了

火狐

IE

以下是关于Chrome＆amp; Safari，它在输入元素周围有奇怪的边框

铬

Safari浏览器

这是我的html＆amp; 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;
}

如何删除该边框？

Answer 1

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

Answer 2

border-width:0px;
border:none;

工作正常。

Answer 3

在我的情况下，我使用的是添加box-shadow的CSS框架，所以我还要添加

box-shadow: none;

所以完整的代码片段是：

border: none; 
border-width: 0; 
box-shadow: none;

Answer 4

您的代码看起来像jsfiddle.net/NTkGZ/

尝试

border:none;

Answer 5

试试这个

#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;
}

我认为图片尺寸可能不对

Answer 6

使用这个我希望这对你有帮助... border：none！important; 背景色：透明;

试试这个

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

Answer 7

很简单

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

Answer 8

我有时使用此 css 代码移除焦点输入边框。希望能帮到你-:

  input:focus, textarea:focus, select:focus{
    outline: none;
}