这个边界是从哪里来的?

Question

使用以下代码，我试图显示一个包含html和css的搜索栏

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

所有这些都像它应该显示的那样，除了它周围的灰色边框。这个边界是从哪里来的?我要怎么去掉它?搜索栏图片

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

Answer 1

这是浏览器默认的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>