HTML 输入文本：在不改变输入大小的情况下增加文本大小答案

【问题标题】：HTML input text: increase text size without changin input sizeHTML 输入文本：在不改变输入大小的情况下增加文本大小
【发布时间】：2014-04-22 02:53:13
【问题描述】：

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

这就是我所拥有的：

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

如果我添加

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

然后输入也增加大小；我怎样才能只使文本/点变大？？

我加了

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

现在我明白了：

【问题讨论】：

标签： html css font-size

【解决方案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）测试演示，因为我刚刚为 transform 属性使用了 -webkit- 前缀。我有点懒得包含所有可能的前缀。

Working Demo.

更新：上面的demo展示了插入符高度填满输入的整个高度的问题，为了降低插入符高度，我们可以使用:before和:after的小技巧伪元素。这是Updated Demo。

遗留问题：您不能仅使用 CSS 设置 :focus 状态下的输入边框样式，当然如果使用 javascript 也可以设置样式。

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

【讨论】：

很难相信这么简单的事情要花费这么多行代码；我希望文本框在 HTML 的其他版本上更加灵活。但是您的代码仍然有效！非常感谢！！！

【解决方案2】：

为输入设置高度并设置字体大小。它会起作用的。 css

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

http://jsfiddle.net/W4Ver/

【讨论】：

【解决方案3】：

这样的？

http://jsfiddle.net/t6Cxz/

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

更新了宽度的小提琴：http://jsfiddle.net/t6Cxz/3/

【讨论】：

不知道...不是我：P