Increase Size Field Balls for Password

Asked

Viewed 1,218 times

2

i want to increase the size of the "balls" of a password input, I thought input { font-size:140% /*exemplo*/ } for example. However, only the bar that keeps blinking at the time of typing that increases. The character balls of the password do not increase. Anyone who can help, thank you!

html css input

  • But they are already WELL different from browser to browser. It will get a little complicated.

2 answers

4


With CSS you can basically change font and size:

<input style="font-size:18px;width:85px;font-family:Lucida Console" type="password">

but it is unpredictable what will happen from browser to browser. What you can do is use a custom font, however, nothing guarantees that the browser will actually use it in practice.

The alternative would be to use Javascript to swap the characters of a text field, however, there are several security issues involved.

See some tests on JS Fiddle, remembering that after you manage to leave exactly the way you want, will test in another browser and... bam! Surprise, everything different!

  • 1

    Man, the lack that’s doing the stackfiddle around here, it’s taking :/

2

Well, I was curious and the best I could find was this,

@media screen and (-webkit-min-device-pixel-ratio:0){ /* START WEBKIT */
 INPUT[type="password"]{
 font-family:Verdana,sans-serif;
 height:30px;
 font-size:30px;
 width:220px;
 padding:5px;
  letter-spacing:2px;
 }
}

If you are changing the font-size Bullets will change size as you need but you have to set the height/width of the input together so that the Bullets are in the right position.

Browser other questions tagged html css input

You are not signed in. Login or sign up in order to post.