Styling Password Fields in CSS

input {  font: small-caption;  font-size: 16px;}

<input type="password">

Styling Password Input Field W/ CSS

What if you tried this approach?
Add a css class to your inputs, and then apply the styles via those classes.

http://jsfiddle.net/zr6yB/

<fieldset class="contact">
    <label for="full_name">Purchasing Account ID:</label>
    <input type="text" id="acc_id" name="acc_id" size="13" class="input-generic" />
    <label for="email_address">Email Address:</label>
    <input type="text" id="email_address" name="email_address" size="13" class="input-generic" />
    <label for="password">Password:</label>
    <input type="password" id="pw" name="pw" size="13" class="input-generic" />
</fieldset>​

CSS (abbreviated)

.input-generic {
    width: 306px;
    ...etc...
}

Get input type=text to look like type=password

Well as @ThiefMaster suggested

input.pw {
    -webkit-text-security: disc;
}

However, this will work in browsers that are webkit descendants.. Opera, Chrome and Safari, but not much support for the rest, another solution to this is using webfonts.

Use any font editing utility like FontForge to create a font with all the characters to be * ( or any symbol you want ). Then use CSS web fonts to use them as a custom font.

CSS styling on password input in ASP.NET not displaying

You are using the helper method overload incorrectly. With your current code, razor will render the markup like this

<input htmlattributes="{ class = form-control, placeholder = Password }"
                                          id="Password" name="Password" type="password">

which is clearly incorrect!

The second parameter of the overload expects an object that contains the html attributes. But you are passing in an an object which has another object in the htmlAttributes property.

The solution is to use the pass the correct object. This should work

@Html.PasswordFor(model => model.Password,
                             new { @class = "form-control", placeholder = "Password"  })

---

Related Topics