How can you set text positon within an input element of type password?

I have an input type="password" object that I need to display an over-sized password font.

I'm having trouble getting the password dots to center and space correctly. I have a simplified version in a jsfiddle posted below.

padding-bottom does not work, because in my case it just removes part of the dot and doesn't move it up. I also tried line-height to no avail. Also in response to other answers, setting the height of the input size to the font size will not work because that makes the input much too large. I need to make the password dots much larger than their initial size but without making the input larger. When I change the size it pushes the dots down, and I need to bring them back to center in the smaller box, but without padding-bottom.

What I'm referring to is the position of the password dots being to low in the input element when I make the size larger. If I pad the bottom it removes part of the dots, but I just need to move them slightly up.

.myPasswordStyle
{
    height: 40px;
    font-size: 50px;
}
<input type="password" class="myPasswordStyle">

http://ift.tt/1zPl4rk