删除 html 输入周围的边框答案

【问题标题】：remove borders around html input删除 html 输入周围的边框
【发布时间】：2013-01-31 03:38:06
【问题描述】：

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

这是FF & IE的样子，没有奇怪的边框就可以了

火狐

IE

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

铬

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

如何去掉那个边框？

【问题讨论】：

您是否尝试将border: none 直接申请到#generic_search？也可以试试border-color: transparent，以防万一，但如果显示边框，还是会占空间。
border: 0 应该足够了，但如果不是，则按钮的浏览器默认样式可能会干扰。您是否尝试过将appearance 设置为none（例如-webkit-appearance: none）
@MurraySmith -webkit-appearance: none 工作正常！

标签： css cross-browser zurb-foundation

【解决方案1】：

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

【讨论】：

【解决方案2】：

很简单

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

【讨论】：

【解决方案3】：

border-width:0px;
border:none;

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

【讨论】：

【解决方案4】：

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

box-shadow: none;

所以完整的sn-p是：

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

【讨论】：

对。为简洁起见，我省略了标准的东西，但你是对的。为了清楚起见，我将更新答案。谢谢。
Foundation 6 是一个需要此框架的示例。

【解决方案5】：

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

试试

border:none;

【讨论】：

【解决方案6】：

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

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

【讨论】：

谢谢，这就是我所缺少的，大纲！

【解决方案7】：

试试这个

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

我觉得图片大小可能不对

【讨论】：

【解决方案8】：

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

试试这个

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

【讨论】：