strange issue in css in react component

Question

I have one div component in react. it is used to display serchable dropdown in react.

if there is extension in the browser it is coming over the component. like you can see icon above the component. when I inspected this component it is coming like below.one image is getting inserted inside the div.

when I am testing in another browser where , there is no extension it is not coming like that. it is proper.

how can I prevent my div tag to insert image automatically?

this icon keeps moving when I type the text.

or check whether the image has cors problem... Check in network tab — dinesh oz, Mar 12 '22 at 11:10
thank you. anything I can do to prevent? because this issue is not cming in other component or elements — Shruti sharma, Mar 12 '22 at 11:16
I recommend you to not use base 64 images just try to use https:// images — dinesh oz, Mar 12 '22 at 11:17
and also consider checking that in the second image you have attached there is no style attribute... Which also could cause the problem — dinesh oz, Mar 12 '22 at 11:19
May be you are not running the latest file in another browser... — dinesh oz, Mar 12 '22 at 11:20

score 0 · Answer 1 · answered Jun 15 '22 at 07:27

This is the icon that comes from LastPass extension.

And icon apears on input tag (in your case, react-select has input tag in value container)

If you want to hide from your site for all users, you can add following CSS style

img[id^=__lpform_][id$=_icon]{
  display: none;
}

If you want to remove the node from html, you can add following JS snippet.

    var lastPassInterval;

    lastPassInterval=setInterval(()=>{
       document.querySelectorAll("[id^=__lpform_] [id$=_icon]")
       .forEach(el=>{ el.remove(); clearInterval(lastPassInterval)})
    },500)

Above code snippet will find all these img tags with matching IDs, and remove it from html.

Another way

In react-select on Input Component you need to pass data-lpignore="true", It will prevent LastPass from displaying icons in input. Check below answer for more info.

https://stackoverflow.com/a/53089923/14614051

strange issue in css in react component

1 Answers1