Question

我正在尝试让我的搜索框工作，但是框中显示的是我和我为我的字段集提供的css。看起来原始文本输入框位于修改后的字段集文本框的顶部（我想用于我的wesite）。 fieldset框更长且完美但我无法输入该框，因为原始小框位于fieldset 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

评论中已经说过，但实际上你需要做的就是清理你的代码。

Have a fiddle!

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

为什么我的<text input =“”>会覆盖<fieldset> </fieldset> </text>的css规则

1 个答案: