Lock - Is it possible to remove the icons from the login inputs?

Help
1

Sorry if this is a duplicate but couldn’t find any similar questions or any reference in the docs.

We wish to remove the icons from the inputs on the login screen as shown in the screenshot below.

![alt text][1]

Thanks in advance

2

Lock does not currently have a configuration option to disable/remove the input field icons. I have submitted a feature request for this.

A workaround is to override the Lock css to remove the icons:

E.g. using Lock v10.16.0

.auth0-lock.auth0-lock .auth0-lock-input-wrap.auth0-lock-input-wrap-with-icon  {
    padding-left: 0;
}

The above CSS is a very quick demonstration for how this could be achieved. It is not production ready, and you should test your implementation exhaustively before using in a production application.

NOTE: Customizing your Lock by overriding its CSS isn’t the recommended method with Lock 10. The issue is that with new releases of Lock, some styling may change, leading to unintended problems if you are overriding the CSS. Additonally, it’s possible to simply overlook use of styles in other places and while the change may look fine in one view, it might not in another.

If you still intend to override CSS to further style your Lock, we recommend that you use a specific patch version of Lock rather than a major or minor version, so that you limit the amount of unexpected results that may occur when you alter the styles, and then another patch is deployed that might cause unexpected behavior in your UI due to the changes. This can be done by ensuring that you specify that patch verion (x.y.z) when including Lock, or downloading it.

Additionally, we of course recommend that you test your CSS changes exhaustively, to ensure that the experience is the one you intend it to be for your customers.
https://auth0.com/docs/libraries/lock/v10/ui-customization

3

Thanks @prashant, that was really helpful, I also wanted to avoid having to mess with the CSS, we will be careful when/if we change versions in the future

4

@prashant, I just tested this, but it didn’t work, also, I forgot to specify that I’m using the inline option (using a container), I’ll play around with it and see if I can make it work with your snippet as an example.

5

Thanks @prashant, that was really helpful, I also wanted to avoid having to mess with the CSS, we will be careful when/if we change versions in the future

6

@prashant, I just tested this, but it didn’t work, also, I forgot to specify that I’m using the inline option (using a container), I’ll play around with it and see if I can make it work with your snippet as an example.

7

@ricardo My css was for older versions of Lock - I have updated my answer for css relevant to Lock v10.16.0. This is a great example of why overriding css is risky!

8

What is the suggested way? While Lock can be customized in some ways, it will hardly cover all customization needs.

9

Agreed, Lock customizations cannot cover all desired UI customizations. In these cases, Auth0.js should be used, with a custom UI.

10

Haha, true we will be careful when upgrading versions.

Thanks a lot for your help.