Where does that border come from?

Question

With the following code i tried to display a searchbar with html and 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>

And all that is getting displayed like it should except that gray border around it. Where is that border from? And how do i remove it? Picture of searchbar

I looked which Element fits like for the shape and i think its the <form> element. In the css of it i haven't defined anything. I tried to add a border around the element but it just added a border as usual.

Answer 1

It's the default fieldset's rendering by the browser, to hide it you need to override that with a specific CSS like so:

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>