css - 删除 html 输入周围的边框

Question

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

这是在FF&IE上的样子，没有奇怪的边框就ok了

火狐

浏览器

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

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)