HTML input text: increase text size without changin input size

Question

I'm using a 4 digits password; the dots that represent each character are too small; I would like to increase the font-size; but I don want to change the input size.

This is what I have:

<input class="pin_code" type="password" maxlength="4"/>

If I add

<input class="pin_code" type="password" maxlength="4" style="font-size:30px"/>

Then the input also increases the size; how can I make only the text/dots to get bigger??

I added

<input class="pin_code" type="password" maxlength="4" style="font-size:30px; height:24px"/>

And now I get this :

Answer 1

I believe that you can't achieve what you want easily. The input text field element seems to be a special element, the height of it will be automatically increased accordingly to the font-size, limiting the height of course will make the middle text line go bottom-wards and look ugly indeed.

To solve this I think we have to clip off the top and bottom part (with an equal distance) and just let the middle part show (together with the text line). To clip off it, we need a wrapper around the input field, position the input field appropriately and set overflow:hidden for the wrapper. Here are the code details:

HTML:

<span class='input-clipper'>
  <input class="pin_code" type="password" maxlength="4"/>
</span>    

CSS:

.pin_code {
  font-size:40px;   
  position:absolute;
  width:100%;
  top:50%;
  -webkit-transform:translateY(-50%);
  left:0;    
  outline:none;
}
span.input-clipper {
  display:inline-block;
  position:relative;
  height:20px;    
  width:200px;    
  overflow:hidden;
  border:1px solid black;
}

NOTE: To style the border, you have to style the border of the wrapper (.input-clipper) instead. You also set the size of the wrapper instead of setting the size of the input field (as before). Please test the demo using webkit-based browser (Chrome, Opera) because I just used -webkit- prefix for the transform property. I'm a little lazy to include all the possible prefixes.

Working Demo.

Update: The demo above shows an issue that the caret height fills the whole height of the input, to reduce the caret height, we can use a small trick with :before and :after pseudo-elements. Here is the Updated Demo.

Remaining Issue: You can't style the border of the input in the :focus state with just CSS, of course you can style it if using javascript.

I think there is a high propability that we have a better solution related to font icons or special characters, ... but I'm not good at that part. Hope someone will post it here.

Answer 2

set height for the input and set the font-size. it will work. css

input{
    height:24px;
    font-size:32px;
}

http://jsfiddle.net/W4Ver/

Answer 3

Something like this ?

http://jsfiddle.net/t6Cxz/

input[type="password"]
{
font-size:30px;
height:30px;
line-height:30px;
width:50px;
}

Updated fiddle with width: http://jsfiddle.net/t6Cxz/3/