首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >为什么我的<text input>重写<fieldset>的css规则?

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

Stack Overflow用户
提问于 2014-05-30 04:30:13
回答 1查看 147关注 0票数 0

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

索引:

代码语言:javascript
复制
<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>
代码语言:javascript
复制
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;
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-05-30 06:45:36

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

来把小提琴!

HTML

代码语言:javascript
复制
<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

代码语言:javascript
复制
#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;
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/23947053

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档