Hide Last Pass icon in input fields

Question

If you have the Last Pass extension installed in chrome it displays a ... on the right side of certain input fields.

I was wondering: Is there a way to hide this with css?

Friedcake

Answer 1

You can also hide the icon by adding this attribute to the input element:

data-lpignore="true"

Insolvable

This also prevents LastPass from working at all on that field... – Hearne

As of 2022 this doesn't hide the the LastPass icon. – Childe

This solution requires that the user has also enabled the 'Respect AutoComplete=off' setting' in their LastPass extension settings LastPass support link – Birchfield

Answer 2

As of 2022 the LastPass icon is placed as a sibling to the input field, so I added this rule to my input container and it worked. 😎

  div[data-lastpass-icon-root] {
    display: none;
  }

Childe

Even with data-lpignore="true" I couldn't get rid of LastPass icons. I've tried everything, this is the only thing that worked. Last pass looks for the Label text, a label "for=" text, the id, the name, the placeholder, if "full name" or "name" are in any of those, it would show. This worked!! THANK YOU, THANK YOU, THANK YOU, THANK YOU !!!! – Christophany

Now a days, it is working by div[data-lastpass-root] – Disbelieve

I was able to remove it from specific inputs by specifying the selector as .hide-lastpass ~ div[data-lastpass-icon-root] and assigning the "hide-lastpass" class to the input. I used "~" rather than "+" because in my site, there was a button right after the input I wanted it removed from, and the LastPass div is created after that button. – Couchant

One more thanks, if people know how to do this in tailwind without putting it in globals.css that would be great – Adonai

Answer 3

As of Oct 2023

place this either in you root css (if you want to disable it for the entire site och just 'above' the input fields you do not want the be affected by LastPass. First rule removes icon, second disables the popup part (i.e. autocomplete on field click) if you wish that as well.

div[data-lastpass-icon-root] { display: none; }
div[data-lastpass-root] { display: none; }

Tactic

Answer 4

I figured it out!

I placed this in my input field styles:

background-image:none !important;
background-attachment:none !important;
padding-right:0 !important;
border:1px solid #ABADB3 !important;

Which had an effect, but something was still visible. Placing this in my global styles got rid of it completely:

div[id^=__lpform_] {
    display: none;
}

Friedcake

Answer 5

To suppress the icon for an input field like below:

<input type="tel" id="cc-number" autocomplete="off">

I used below css:

img[id^='__lpform_cc-number_icon'] {
    display: none !important;
}

input {
background-image: none !important;
}

data-lpignore="true"

^^ no longer works I guess. I am not sure, as it didn't work in my case.

Ernest

This was spot on for me but since I actually have a different background image in my input field, I didn't want to kill that too. I removed that part and it works fine with just the code between your first 2 brackets. Thanks for this, other solutions didn't work for me and this was killing my interface. – Counterfoil

Answer 6

I've also faced the same issue, As I am using Telerik RadCombobox and RadTextBox, Last pass icon is displaying in all the server controls.

Tried using below css: jst paste it in the aspx page

div[data-lastpass-icon-root] { display: none. }

Its working fine.

RadCombobox having icon lastpass

Radcombobox removed icon using above css

Mores

Answer 7

Update NOV 2021

I have noticed that all LastPass widgets got class css-1obar3y.

div.css-1obar3y {
  display: none!important;
}

Works perfectly for me

Hashish

Answer 8

Summary:

For STANDARD <input type='text' the following CSS/Style will work:

data-lpignore='true'
autocomplete='off'

However, LastPass will ignore "data-lpignore/autocomplete" when for any <input=type='text', the input 'id' or 'name' have the word "user", "name", or "email" or any synonym similar, OR EVEN if the label for said input has the "for" or label text containing the word "user", "name", or "email" or any synonym similar. In this case you must use:

DIV[data-lastpass-icon-root] {
  display: none !important; /* This disables LastPass */
}

Christophany

Answer 9

I was able to handle this by below snippet. Maybe they've changed attribute name.

div[data-lastpass-root] {
   display: none;
}

Due to last-pass I was getting some extra space below to the footer on all pages of Angular.

Disbelieve

Just a heads up in Jan 2024 the selector is this div[data-lastpass-icon-root] – Ostiary