Oracle Apex: Mask Password Using CSS

I was creating a user master entry screen in Oracle Apex and for a password field, I specified its type as Password. And when I was opening that screen at runtime, it was showing me the existing username and password stored in my Google Chrome browser, which was not required at the time of data entry. I tried a lot to sorted out this issue, but it didn't and became very irritating. Then I started looking for some other way and found the best way to mask the password using the CSS -webkit-text-security property. In this tutorial, I will show you how to mask the password using CSS in Oracle Apex.

Mask Password Using CSS -webkit-text-security Property in Oracle Apex

First, set the type of the password field as a Text Field in Oracle Apex. In my page for this example, the item name is P36_PASSWORD.

Example -1: Mask the password as Round Disc

Now copy the below CSS code and paste into the page inline CSS section as shown in the below image:

#P36_PASSWORD { -webkit-text-security: disc;}

NOTE: Change the P36_PASSWORD with your page password item.

Mask password using CSS in Oracle Apex.

Save the changes and run the page to test. The output would be as shown in the below image:

Mask password as disc.

It will mask the password as Disc and stores the actual value you entered for the field. You can also change the mask symbol as a circle, square, etc. The following are the examples:

Example -2: Mask The Password as Circle Using CSS

To display a Circle for a password character, use the circle value for the -webkit-text-security CSS property.

#P36_PASSWORD { -webkit-text-security: circle;}

Output:

Mask Password as Circle using CSS.

Example -3: Mask the Password as Square Using CSS

To display a Square for a password character, use the circle value for the -webkit-text-security CSS property.

#P36_PASSWORD { -webkit-text-security: square;}

Output:

Mask password as square using CSS.

I think the Password Type field is good for the login screens in Oracle Apex and for the data entries, this method is good.

Related Tutorials:

Vinish Kapoor
Vinish Kapoor

Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.