使用以下代码,我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中,我没有定义任何东西.
我试图在元素周围添加边框,但它只是像往常一样添加了边框.