3

I have a password input with the eye symbol to show the text, it works fine, however, It lies exactly when the LastPass box is laying.

My goal is to move the eye symbol a bit to the left if the extension is on, but I don't want to disable it completely because it can be useful and for other reasons.

Current behavior:

enter image description here

Expected behavior:

enter image description here

Is there a way to detect something like this?

UPDATE Something like in material-ui: https://material-ui.com/components/text-fields/#input-adornments

Roy
  • 1,612
  • 2
  • 12
  • 38
  • Perhaps the eye symbol could be moved *after* the input element? I'm assuming LastPass adds the symbol to the *end of the input element*, so placing it outside the input element would solve the overlap. – cbr May 21 '20 at 14:14
  • But to help with the actual question - does the LastPass symbol have a unique classname or ID? – cbr May 21 '20 at 14:15
  • It sits on the current input, it adds a background to it. therefore, you can't identify it. – Roy May 21 '20 at 14:16
  • https://pastebin.com/kbJeaAWS – Roy May 21 '20 at 14:17
  • I could to that, but then the eye would be outside the input, and I don't really want that.. – Roy May 21 '20 at 14:20
  • Does this work? [How can I tell if my website visitors are using LastPass or other password managers?](https://webmasters.stackexchange.com/q/92237) – cbr May 21 '20 at 14:22
  • Yes, it would be outside the `` but you could style it so that it *looks like* it's inside the input. – cbr May 21 '20 at 14:23
  • @cbr Thanks for the answer, but it doesn't work for me – Roy May 21 '20 at 14:28

1 Answers1

0

So, since I didn't get any answers, I went with @cbr 's solution which is to trim the input width and make it look like the eye is in the input.

Roy
  • 1,612
  • 2
  • 12
  • 38