Menu
I have an input type password that only allow a six-digit number like this:
<fieldset> <label for="password-input">Enter New Pin</label> <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" maxlength="6" size="6" value=""> <span class="hint">New pin must be 6 digit number only</span> </fieldset> It will show like this:
How can I style it so it can look like the following?
251
To take password input in HTML form, use the <input> tag with type attribute as a password. This is also a single-line text input but it masks the character as soon as a user enters it.
You can't change the password masking character in the standard password field. You can fake it with a textbox, but it makes for a weak security model because you don't get the protection you do from the password textbox.
<input type="password" class="form-control" placeholder="Password" required > </div> </div> <div class="col-md-6">
Right-click the password field and click Inspect Element. A gray bar will appear with the password field highlighted. Press Alt+M or click on the icon shown below to open the Markup Panel. It will show you the code for the password field.
Since you can't use the ::after pseudo-element on your input box, use it on fieldset (or if you can alter the HTML, add an element). Then give it a content value using underscores, and position the elements where you want them. Finally, add letter-spacing and width to your input box, and give it a :focus of outline: none to get rid of the blue box.
fieldset { color: #555; font-family: sans-serif; border: none; position: relative; } fieldset > * { display: block; } fieldset::after { content: "___ ___ ___ ___ ___ ___"; display: block; position: absolute; top: 35px; white-space: pre; } label { font-size: 14px; margin-bottom: 6px; } input#password-input { position: relative; font-size: 16px; z-index: 2; border: none; background: transparent; width: 300px; text-indent: 9px; letter-spacing: 25.6px; font-family: Courier; } input#password-input:focus { outline: none; } span.hint { margin-top: 8px; font-size: 12px; font-style: italic; } span.hint::before { content: "* "; }<fieldset> <label for="password-input">Enter New Pin</label> <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" maxlength="6" size="6" value=""> <span class="hint">New pin must be 6 digit number only</span> </fieldset>Try this:
input { padding-left: 15px; letter-spacing: 39px; border: 0; background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%); background-position: bottom; background-size: 50px 3px; background-repeat: repeat-x; background-position-x: 35px; width: 280px; font-size: 30px; } input:focus { outline: none; }<fieldset> <label for="password-input">Enter New Pin</label> <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" maxlength="6" size="6" value=""> <span class="hint">New pin must be 6 digit number only</span> </fieldset>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
