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.

Its probably your **fieldset**. However, this is a good opportunity to learn how to use the element inspector in your browser. Your browser comes with an element inspector in the console that will allow you to select an element and see the corresponding CSS. — imvain2, Mar 29 '23 at 18:53

score 0 · Accepted Answer · answered Mar 29 '23 at 18:53

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>

Where does that border come from?

1 Answers1