White block behind Icon - html

Question

How do I remove the block behind the search icon shown in the image, the block displays in mac and not windows, want to remove for mac
the code is in bootstrap designed:
<div class="search-container">
<form action="/search" method="get">
<input class="search expandright" id="searchright" type="search" name="q" placeholder="Search">
<label type="button" class="ms-3 bg-white searchbutton border border-0 bg-none" for="searchright"><i class="fa-solid fa-magnifying-glass mt-1"></i></label>
</form>
</div>
The css code:
#media screen
and (min-device-width: 100px)
and (max-device-width: 1400px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
.expandright {
left: 49px;
right: auto; /* Button width-1px */
}
.expandright:focus {
padding: 0 0 0 16px;
border: 2px solid #006400;
border-radius: 10px;
}
.search-container {
position: relative;
display: inline-block;
margin: 4px 2px;
height: 50px;
width: 50px;
vertical-align: bottom;
}
.searchbutton {
position: absolute;
font-size: 22px;
width: 100%;
margin: 0;
padding: 0;
}
.search:focus + .searchbutton {
transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
background-color: none;
color: none;
}
.search {
position: absolute;
left: 49px;
background-color: white;
outline: none;
border: none;
padding: 0;
width: 0;
height: 100%;
z-index: 10;
transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
}
}
were expecting to look like this
How to remove the background behind the search icon ?