更改 <input type=text> 字体大小而不更改其宽度答案

【问题标题】：Change <input type=text> font-size without changing its width更改 <input type=text> 字体大小而不更改其宽度
【发布时间】：2015-12-14 00:49:32
【问题描述】：

我有两个文本框，它们的宽度比应该是 2:1，我可以使用 flex 来做到这一点。但是当我将字体大小更改为 300% 时，文本框的宽度变得相等。
如何避免这种情况并保持 2:1 的宽度？

这是代码：

input[type=text] {
  font-size: 300%;
}
#b4 {
  flex: 2;
}
#b2 {
  flex: 1;
}
div {
  display: flex;
  width: 100%;
}

<div>
  <input type="text" id="b4"></input>
  <input type="text" id="b2"></input>
</div>

另外，我不想为任何文本框设置固定宽度。

【问题讨论】：

@FalcoB：在您将其转换为 sn-p 之前，原始代码是这样的吗？我不明白这如何被视为比我在问题中看到的更简洁的代码，而您的编辑处于待处理状态。缩进到处都是，HTML中有多余的空行，而且很难看。似乎有些不对劲。
尝试在px 或em 中提供font-size % 除外
在大屏幕中大小为 1:2。你是说小屏幕的问题吗？
@Amitsingh 我必须在% 中设置字体大小，并且在px 或em 中设置字体大小不起作用。
无法重现 - jsfiddle.net/o29Lzsuf

标签： html css flexbox

【解决方案1】：

您可以为您的文本框设置固定的高度和宽度，并设置您选择的字体大小。

例子：

width: 180px;
font-size: 24px;
height: 25px;`

【讨论】：

没有。我不想设置固定尺寸。

【解决方案2】：

这似乎是 Firefox 的问题，因为 Chrome 和 IE11 没有任何问题。（无法像在 Windows 上一样在 Safari 上进行测试）。

一种解决方案，将单个输入包装在 div 中并调整那些并将输入设置为 100% 宽。

在 FF 40 中测试，似乎可以工作。

Codepen Demo

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
input[type=text] {
  display: block;
  width: 100%;
  border: 1px solid green;
}
.double {
  flex: 2;
}
.single {
  flex: 1;
}
.wrap {
  display: flex;
  margin-bottom: 1em;
}
.large input[type=text] {
  font-size: 300%;
}

<div class="wrap">

  <div class="double">
    <input type="text" class="b4"></input>
  </div>
  <div class="single">
    <input type="text" class="b2"></input>
  </div>
</div>

<div class="wrap large">

  <div class="double">
    <input type="text" class="b4"></input>
  </div>
  <div class="single">
    <input type="text" class="b2"></input>
  </div>
</div>

【讨论】：

无法解释我有多高兴找到这个。我一直在寻找一份体面的工作，并自己尝试了很多东西，但我不敢相信我没有尝试过这个......谢谢

【解决方案3】：

这是一个 Firefox 问题。

最好的解决方案是为输入添加一个最小宽度。

input{ min-width:0;}

或

将单个输入包装在 div 中并调整它们并将输入设置为 100% 宽。

【讨论】：

在我的 android 上的 chrome 中遇到了同样的问题。 min-width:0 修复了它。谢谢@Abhiman Ranaweera