Image of Disable save password prompt on login forms using CSS

ADVERTISEMENT

Table of Contents

Introduction

Browsers automatically prompt users to save their password after login. In fact, this functionality provides a big advantage for allowing the user to login afterwards without reentering his credentials again. However, it also has its disadvantages and some people considers it as a security leak since anyone can view your saved passwords using the browser settings.

In this tutorial, we provide a workaround solution using html and CSS which disables the “Save Password” prompt on login forms and works perfectly on all popular browsers.

1- Input[type=”password”]

When a browser sees an input element of type “password”, it directly displays the “Save Password” prompt after form submission (regardless whether the password element is defined inside a form or not).

Let’s reproduce the problem and explain how our workaround works.

For demonstration purposes, we create a web application and define a typical login page under WEB-INF as the following:

<head>
<style>
input.password {
    width:15%;
    margin-bottom:5px
}
</style>
</head>
<form style="text-align:center" name="formlogin" id="formlogin" action="home.html" method="get" target="_top" autocomplete="off">
    <div>
        <label for="username">Username: </label>
        <input type="text" style="width:15%;margin-bottom:5px" id="username" name="username" autocomplete="off" /><br>
    </div>
    <div>
        <label for="password">Password: </label>
        <input  type="password" class ="password" id="password" name="password" autocomplete="off" /><br>
    </div>
    <div>
        <input type="button" value="Login" onclick="document.forms.formlogin.submit();"/>
    </div>
</form>

Our page looks like:

login

After filling the credentials and clicking on login, the following prompt is displayed by the browser:

disable

2- How to disable “Save Password” prompt using CSS

Our solution is of 3 steps:

  • Change the type of password textbox to be “text” instead of “password”, this way the browser won’t deal with it as a password.
  • Download the “security-disc” font files/images from here.
  • Change the font of password textbox to look like discs so that no one around sees your password while you enter it.

2.1. Change type of password

Change the type of password element to “text” as the following:

<input  type="text" class ="password" id="password" name="password" autocomplete="off" />

2.2. Download “security-disc” files

Download the “security-disc” font/images files then define the font files under WEB-INF/fonts and font images under WEB-INF/images.

2.3. Change the font of password

In login.html, define a custom font called ‘text-security-disc’ using @font-face then set the font-family of password to be ‘text-security-disc’.

<style>
 
@font-face {
    font-family: 'text-security-disc';
    src: url('fonts/text-security-disc.eot');
    src: url('fonts/text-security-disc.eot?#iefix') format('embedded-opentype'),
        url('fonts/text-security-disc.woff') format('woff'),
        url('fonts/text-security-disc.ttf') format('truetype'),
        url('images/text-security-disc.svg#text-security') format('svg');
}
 
input.password {
    font-family: 'text-security-disc';
    width:15%;
    margin-bottom:5px
}
</style>

Now if you open the updated login page, you won’t be prompted anymore for saving your password.

P.S: This solution works perfectly on Chrome(67.0.3396.99), Firefox(61.0.1), Edge(42.17134.1.0) and IE(11)

Summary

In this tutorial, we provide a workaround solution using html and CSS which disables the “Save Password” prompt on login forms and works perfectly on all popular browsers.

Next Steps

If you're interested in learning more about the basics of Java, coding, and software development, check out our Coding Essentials Guidebook for Developers, where we cover the essential languages, concepts, and tools that you'll need to become a professional developer.

Thanks and happy coding! We hope you enjoyed this article. If you have any questions or comments, feel free to reach out to jacob@initialcommit.io.

Final Notes