去掉HTML输入框周围的边框。

Question

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

以下是在Firefox和IE上的外观，没有奇怪的边框

Firefox

IE

以下是在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;
}

如何去除那个边框？

- Timeless

---

你尝试过直接将 border: none 应用于 #generic_search 吗？你也可以尝试 border-color: transparent，但如果边框被显示出来，它仍然会占据空间。 - esycat

border: 0 应该足够了，但如果不行的话，也许按钮的浏览器默认样式会干扰。你尝试过将 appearance 设置为 none 吗（例如 -webkit-appearance: none）？ - Murray Rowan

@MurraySmith -webkit-appearance: none 很好用！ - Timeless

Answer 1

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

- Murray Rowan

Answer 2

很简单

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

- Sina Kuhestani

Answer 3

border-width:0px;
border:none;

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

- Dipak

Answer 4

在我的情况下，我正在使用一个添加了 box-shadow 的CSS框架，因此我也不得不添加

box-shadow: none;

所以完整的代码片段是：

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

- isapir

---

好的。为了简洁起见，我省略了标准内容，但你是正确的。我会更新答案以便更清晰。谢谢。 - isapir

Foundation 6是一个需要这个的框架的例子。 - Charles

Answer 5

我有时使用这段CSS代码来去掉焦点输入框的边框。希望能帮到你-：

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

- Devansh Anand

---

谢谢，那就是我缺少的，轮廓！ - Sasino

Answer 6

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

试试看

border:none;

- Pawan Lakhara

Answer 7

尝试以下代码：

.yourClassName{
    border: 0;
    outline: none;
   }

- Luis

Answer 8

设置{border:transparent;}。它不会移除边框，但仍然不会显示。

正如有人在这里说的那样，在焦点上设置outline:none。

- gustavo catala sverdrup

Answer 9

试试这个

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

我认为图片尺寸可能有误

- basarat

Answer 10

使用这个，希望对你有所帮助... border:none !important; background-color:transparent;

尝试一下这个

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

- Vbiz Solutions