HTML/CSS搜索栏灰色边框来源及移除方法咨询

我使用以下HTML和CSS代码实现了一个搜索栏，整体显示符合预期，但搜索栏周围出现了一圈灰色边框。我猜测该边框来自<form>元素，但未为其定义任何CSS样式，尝试为该元素添加边框也只是新增了常规边框。请问这个灰色边框来自哪里？如何移除它？

实现代码 #

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

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>

这个灰色边框并非来自<form>元素，而是浏览器给<fieldset>设置的默认样式——绝大多数浏览器会给<fieldset>添加灰色的实线边框，你当前的CSS仅重置了它的显示模式、内外边距规则，但未覆盖默认的边框属性。

要移除这个边框，只需给<fieldset>添加border: none;样式，同时可以根据布局需求调整内边距，避免默认内边距导致的排版偏移：

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;
  border: none; /* 移除默认灰色边框 */
  padding: 0; /* 可选：清除默认内边距，让搜索栏元素对齐更紧凑 */
}

如果不需要<fieldset>的语义化功能，也可以直接移除HTML中的<fieldset>标签，直接将输入框和按钮放在<form>内，这样也能避免默认样式的干扰。

内容的提问来源于stack exchange，提问作者Sobig_F