为什么我的<text input>重写<fieldset>的css规则？

Question

我正在努力使我的搜索框工作，但该框显示在我的顶部，我给我的字段集的css。看起来，原始文本输入框位于修改后的字段集文本框的顶部(我希望将其用于我的wesite)。字段集框更长、更完美，但我无法键入该框，因为原始的小框位于字段集css的顶部。谢谢

索引：

<form id="search-form" action="/properties/search" method="get">
  <fieldset>
    <input type ="text "name="q" placeholder="Search for a Website" autocomplete="off">
    <button type="button" data-hasqtip="5" oldtitle="search" title aria-    describedby="qtip-5">&nbsp;</button>
  </fieldset>
</form>

css:

#search-form {
  display: block;
  margin-top: 9px;
  float: left;
}

#search-form fieldset {
  position: relative;
  width: 425px;
  height: 22px;
  padding: 0;
  background-color: #fdfdfd;
  border: 1px solid #ced8dd;
}

#search-form input[type="text"] {
  position: relative;
  font-size: .8125em;
  line-height: 1.3846153846153846;
  padding: 0;
  margin: 2px 0 0 5px;
  border-width: 0;
  width: 380px;
}


search-form button {
  position: absolute;
  right: 0;
  width: 18px;
  height: 16px;
  padding: 0;
  margin: 3px 3px 0 0;
  border: 0;
  border-left: 1px solid #ced8dd;
  background-color: #fdfdfd;
  background-repeat: no-repeat;
  background-image: url("http://images.househappy.org/icon_sprite_1x_v14.png");
  background-position: -10px -22px;
}

Answer 1

注释中已经说过了，但是真正需要做的就是清理代码。

来把小提琴！

HTML

<form id="search-form" action="/properties/search" method="get">
  <fieldset>
      <input type="text" name="q" placeholder="Search for a Website" autocomplete="off" />
    <button type="button" data-hasqtip="5" oldtitle="search">&nbsp;</button>
  </fieldset>
</form>

CSS

#search-form {
  display: block;
  margin-top: 9px;
  float: left;
}

#search-form fieldset {
  position: relative;
  width: 425px;
  height: 22px;
  padding: 0;
  background-color: #fdfdfd;
  border: 1px solid #ced8dd;
}

#search-form input[type="text"] {
  position: relative;
  font-size: .8125em;
  line-height: 1.3846153846153846;
  padding: 0;
  margin: 2px 0 0 5px;
  border-width: 0;
  width: 380px;
}


#search-form button {
  position: absolute;
  right: 0;
  width: 18px;
  height: 16px;
  padding: 0;
  margin: 3px 3px 0 0;
  border: 0;
  border-left: 1px solid #ced8dd;
  background-color: #fdfdfd;
  background-repeat: no-repeat;
  background-image: url("http://images.househappy.org/icon_sprite_1x_v14.png");
  background-position: -10px -22px;
}