使用以下代码,我try 显示一个带有html和css的搜索栏.

Html:

<div id="headerStuff_searchbar">
                <form action="idunnophpjet.php" method="get" id="headerStuff_searchbar_form">
                    <fieldset>
                        <input id="headerStuff_searchbar_field"type="text" placeholder="Suchbegriff eingeben" name="search">
                        <button id="headerStuff_searchbar_button"></button>
                    </fieldset>
                </form>
</div>

另请参阅以下内容:

#headerStuff_searchbar{
    position: absolute;
    top: 81px;
    left: 752px;
    width: 500px;
    height: 43px;
    z-index: 1002;
}
fieldset {
    display: block;
    margin-inline-start: 2px;
    margin-inline-end: 2px;
    padding-block-start: 0.35em;
    padding-inline-start: 0.75em;
    padding-inline-end: 0.75em;
    padding-block-end: 0.625em;
    min-inline-size: min-content;
}
#headerStuff_searchbar_field{
    width: 395px;
    margin-right: 3px;
    box-sizing: border-box;
    height: 41px;
    font-size: 12pt;
    font-family: sans-serif;
    color: #676767;
    background-color: white;
    padding: 10px;
    margin: 0;
    vertical-align: middle;
    border-style: solid;
    border-width: 1px;
}
#headerStuff_searchbar_button{
    background-position: 10px center;
    width: 41px;
    background-image: url("http://www.jacobson-gymnasium.de/search/icon.png");
    background-repeat: no-repeat;
    background-size: 16px 16px;
    box-sizing: border-box;
    font-size: 12px;
    font-family: sans-serif;
    line-height: 19px;
    height: 41px;
    color: white;
    background-color: rgb(255, 128,0);
    padding: 10px 10px 10px 29px;
    vertical-align: middle;
    cursor: pointer;
    border-style: solid;
    border-width: 1px 1px 1px 1px;

}

除了它周围的灰色边框外,所有的东西都像它应该显示的那样显示. Where is that border from? And how do i remove it? Picture of searchbar

我看了看哪个元素适合这个形状,我想是<form>个元素.在它的css中,我没有定义任何东西. 我试图在元素周围添加边框,但它只是像往常一样添加了边框.

推荐答案

这是浏览器默认呈现的fieldset,要隐藏它,您需要使用特定的css覆盖它,如下所示:

fieldset {
  border: 0;
}

#headerStuff_searchbar {
  position: absolute;
  top: 81px;
  left: 752px;
  width: 500px;
  height: 43px;
  z-index: 1002;
}

fieldset {
  display: block;
  margin-inline-start: 2px;
  margin-inline-end: 2px;
  padding-block-start: 0.35em;
  padding-inline-start: 0.75em;
  padding-inline-end: 0.75em;
  padding-block-end: 0.625em;
  min-inline-size: min-content;
}

#headerStuff_searchbar_field {
  width: 395px;
  margin-right: 3px;
  box-sizing: border-box;
  height: 41px;
  font-size: 12pt;
  font-family: sans-serif;
  color: #676767;
  background-color: white;
  padding: 10px;
  margin: 0;
  vertical-align: middle;
  border-style: solid;
  border-width: 1px;
}

#headerStuff_searchbar_button {
  background-position: 10px center;
  width: 41px;
  background-image: url("http://www.jacobson-gymnasium.de/search/icon.png");
  background-repeat: no-repeat;
  background-size: 16px 16px;
  box-sizing: border-box;
  font-size: 12px;
  font-family: sans-serif;
  line-height: 19px;
  height: 41px;
  color: white;
  background-color: rgb(255, 128, 0);
  padding: 10px 10px 10px 29px;
  vertical-align: middle;
  cursor: pointer;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
}
<div id="headerStuff_searchbar">
  <form action="idunnophpjet.php" method="get" id="headerStuff_searchbar_form">
    <fieldset>
      <input id="headerStuff_searchbar_field" type="text" placeholder="Suchbegriff eingeben" name="search">
      <button id="headerStuff_searchbar_button"></button>
    </fieldset>
  </form>
</div>

Html相关问答推荐

srcset和大小总是下载最大的

如何只混合部分的背景而不是内容<>

在元素之间添加空格

在 Select 前后更改选项卡的背景

如何使用css为动态用户输入矩阵添加背景色?

使用css第n个子元素,如何迭代Y组中的X个元素?

可以';t使我的导航栏在HTML/CSS中正确对齐

为什么index.html在Django中有这样的名称?

如何在悬停时使用 CSS 更改许多同级元素

伪元素:after和溢出隐藏

如何在CSS伪类函数中使用复合 Select 器:host-context()

如何使用CSS Select 同级元素的::before伪元素?

如何正确地嵌套Flexbox

屏幕缩小时背景图像裁剪高度

更改标签标签的大小

防止按钮溢出到新行

如果不透明的元素出现在下方,为什么不透明度会使一个元素出现在另一个元素上方?

不理解 CSS 中的 General sibling combinator (~)

如何使具有两个元素的 div 行在移动设备中响应

是否可以使用纯 css 创建具有斜角效果的锯齿形边缘?