HTML 输入文本 : increase text size without changin input size

Question

我使用的是 4 位密码；代表每个字符的点太小；我想增加字体大小；但我不想更改输入大小。

这是我的:

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

如果我添加

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

然后input也增加size；我怎样才能让文字/点变大？？

我加了

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

现在我明白了:

Answer 1

我相信你无法轻易实现你想要的。 input text field 元素好像是个特殊的元素，它的高度会随着font-size自动增加，限制高度当然会让中间的文本行往下走，确实难看。

为了解决这个问题，我认为我们必须剪掉顶部和底部(等距离)，只让中间部分显示(连同文本行)。要剪掉它，我们需要一个围绕输入字段的包装器，适当定位输入字段并设置 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 的前缀属性(property)。我有点懒得包含所有可能的前缀。

Working Demo .

更新:上面的演示显示了插入符高度填满输入的整个高度的问题，要减小插入符高度，我们可以使用 :before 的小技巧。和 :after伪元素。这是 Updated Demo .

剩余问题:您不能仅使用 CSS 设置 :focus 状态下输入框的样式，当然，如果使用 javascript，您可以设置它的样式。

我认为很有可能我们有更好的与字体图标或特殊字符相关的解决方案，...但我不擅长那部分。希望有人会在这里张贴。