Question

我使用4位密码;代表每个角色的点太小;我想增加字体大小;但我不想改变输入大小。

这就是我所拥有的：

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

如果我添加

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

然后输入也增加了大小;我怎样才能让文字/点变大？

I want dots bigger and more spaced

我添加了

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

现在我明白了：

enter image description here

Answer 1

我相信你无法轻易实现自己想要的目标。输入文本字段元素似乎是一个特殊元素，它的高度将相应地自动增加到字体大小，限制高度当然会使中间文本行走到底部并看起来很难看。

为了解决这个问题，我认为我们必须剪掉顶部和底部（距离相等），然后让中间部分显示（与文本行一起）。要剪掉它，我们需要一个围绕输入字段的包装器，适当地定位输入字段并为包装器设置overflow:hidden。以下是代码详细信息：

<强> 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;
}

注意：要设置边框样式，您必须设置包装器边框（.input-clipper）的样式。您还可以设置包装器的大小，而不是设置输入字段的大小（如前所述）。请使用基于webkit的浏览器（Chrome，Opera）测试演示，因为我只使用了-webkit-属性的transform前缀。我有点懒，不能包括所有可能的前缀。

Working Demo

更新：上面的演示显示了插入符号高度填充输入的整个高度的问题，为了减少插入符号高度，我们可以使用:before和{:after的小技巧{1}}伪元素。这是Updated Demo。

剩余问题：您无法使用CSS在：focus 状态下设置输入边框的样式，当然如果使用javascript，您可以设置样式

我认为我们有更好的解决方案，我们有一个更好的解决方案，与字体图标或特殊字符相关，......但我并不擅长这一部分。希望有人会在这里发布。

Answer 2

设置输入的高度并设置font-size。它会工作。 CSS

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

http://jsfiddle.net/W4Ver/

Answer 3

这样的东西？

http://jsfiddle.net/t6Cxz/

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

更新了宽度：http://jsfiddle.net/t6Cxz/3/

HTML输入文本：增加文本大小而不更改输入大小

3 个答案:

Working Demo