HTML输入文本:增加文本大小而不使用changin输入大小

Question

我使用的是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"/>

现在我明白了:

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属性的前缀.我有点懒,不能包括所有可能的前缀.

工作演示.

更新:上面的演示表明,尖高度填充输入的整个高度,以减少插入符高度的问题,我们可以使用一个小窍门与:before和:after伪元素.这是更新的演示.

剩余问题:您不能使用CSS 在:focus状态下设置输入边框的样式,当然如果使用javascript,您可以设置样式.

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