How can I Style a Text Input to Look Like a Password Field Using CSS?

Style Input Text to Resemble Password Field Using CSS

Challenge:

Many web forms include input fields with the "type=text" attribute. While this attribute allows users to enter visible text, it may be desirable to conceal sensitive information by displaying asterisks instead, as in an input field with the "type=password" attribute.

Solution with CSS:

CSS provides a solution to address this challenge. The -webkit-text-security and text-security properties offer a way to conceal text input in browsers:

Code:

<code class="css">input.pw {
  -webkit-text-security: disc;
  text-security: disc;
}</code>

Implementation:

Apply the class "pw" to the input field:

<code class="html"><input type="text" class="pw" value="abcd"></code>

Additional Features:

For browsers that do not support these properties, consider providing a fallback option or using a JavaScript-based solution.

Browser Compatibility:

The -webkit-text-security property is supported in WebKit-based browsers, while the text-security property is supported in modern browsers. For IE8 compatibility, a CSS fallback or JavaScript solution is recommended.

The above is the detailed content of How can I Style a Text Input to Look Like a Password Field Using CSS?. For more information, please follow other related articles on the PHP Chinese website!