删除html输入周围的边框

Question

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

这里是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;
}

如何删除该边框？

Answer 1

border: 0应该足够了,但如果不是,也许按钮的浏览器默认样式会干扰.你有没有尝试设置appearance到none(例如-webkit-appearance: none)

Answer 2

border-width:0px;
border:none;

会工作得很好.

Answer 3

这很简单

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

Answer 4

就我而言，我使用的 CSS 框架添加了box-shadow，所以我还必须添加

box-shadow: none;

所以完整的片段是：

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

Answer 5

我有时使用这个 css 代码来删除焦点输入边框。希望能帮到你——：

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