'not able to remove browser extension in my select field

I have below react-select componet. it works as searchable dropdown .

 <div className='input'>
  <Select 
        id="sponsor" 
        name="sponsor"
        className={styles.input}
        placeholder="Sponsor"
        options={result.map((sponsor:Sponsor)=>
              ({ label: sponsor.name, value: sponsor.id })
      )}
  })
}}
/>
</div>

the red part is browser extension which is coming. I can not remove it bcoz of org policy.

enter image description here

when I type text to serach in select it comes like below.

enter image description here

I am not able to remove it I tried my best. below is content of my scss file.

Select{
    text-shadow: none;
    background-image: none;
    background: none!important;
}
 input {
    padding: .5rem;
    font-size: 16px;
    width: 100%;
    display: block;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: none !important;
    background-image: none;
    
  }

basically its an image. when I inspect it it comes like this. enter image description here

if I mark image as hidden in browser inspection ,this goes off. how can I make changes in my scss file or component?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source