Skip to content
Cross-browser alternative to -webkit-text-security
JavaScript HTML CSS
Branch: master
Clone or download
Latest commit 346000f Nov 9, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets Create css file for each shape and minify Jan 3, 2018
dist Run build (binary file changes) Nov 9, 2018
.editorconfig Add editorconfig Jan 5, 2018
.eslintrc.json Fix a few deprecation warnings and rebuild Nov 5, 2017
.gitignore Create css file for each shape and minify Jan 3, 2018
.npmignore Add npmignore file Nov 5, 2017
LICENSE Initial commit Apr 29, 2016 Remove the suggestion to use rawgit Nov 9, 2018
demo.html Add missing p tags to demo Apr 30, 2016
index.js add woff2 generation Nov 8, 2018
package-lock.json 1.2.0 Nov 9, 2018
package.json 1.2.0 Nov 9, 2018


Cross-browser alternative to -webkit-text-security

This is a simple set of fonts that only consists of 3 different characters. Disc circle and square . For example, setting
font-family: "text-security-circle" for an element should then display all the element's characters in a concealed way, like it was a password field.

This is useful if you want to get the benefits of input[type="password"] but also combine that with other element types, like input[type="tel"]. In fact, the project was created for this exact purpose as an answer to a StackOverflow question.


npm install text-security

You can use the fonts by adding this repo as a dependency and including dist/text-security.css in your project, like so

<link rel="stylesheet" type="text/css" href="node_modules/text-security/dist/text-security.css">

Building with custom modifications

If you want to make your own tweaks, the npm run build command has two optional arguments for you. By default, 768 different unicode characters are included in the fonts, making it reliable for different use-cases but also adding quite a big font files as a dependency. You can use the --max={number} option to reduce the amount of included unicode characters.

If you are feeling wild, you can also add your custom shapes by dropping them to assets folder and running the build with --shapes={string} option. The value should be comma-separated list of svg file names (don't include the file extension in the name). The default value is circle,square,disc. The generated css will have class names with text-security-* prefix followed by the name of the shape, like text-security-disc.


demo.html contains a proof-of-concept demo file, which you can just open in any browser. The same thing can also be found as a fiddle.

You can’t perform that action at this time.