0
162
Viewsstrange issue in css in react component
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.
1 answers
Answer question0
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.