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?

Answer 1

您还可以通过将此属性添加到 input 元素来隐藏图标：

data-lpignore="true"

Answer 2

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;
}

Answer 3

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.

Answer 4

Update NOV 2021

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

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

Works perfectly for me

Answer 5

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;
  }

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.