为什么<input>元素不遵循最小宽度限制？

Question

http://jsbin.com/nuzazefuwi/1/edit?html,css,output

链接中的文本框应该只有10px宽度，但实际上它有152px的宽度。

以下是代码：

.input {
  width: 100%;
  box-sizing: border-box;
}

.cont {
  padding: 2px;
}

.main {
  position: absolute;
  border: 1px solid black;
  min-width: 15px;
}

<div class='main'>
  <div class='cont'>
    <input type="text" class='input' />
  </div>
</div>
<br/>
<br/>
<br/> the textbox should have 10px

只有在 .main 的 min-width 大于156px后，输入框才开始显示正确的宽度。

- Omu

---

为 input 设置 border:0; outline:0。 - Vitorino fernandes

你想让输入框的宽度为10像素？真的吗？但是怎么做呢？ - Kheema Pandey

在您的演示中，文本框显示100%。 - user3386779

抱歉，但是怎么/为什么会是10像素呢？你的代码中没有使用任何宽度声明。 - jbutler483

Answer 1

<input>类型为text、search、tel、url、email和password，默认情况下设置了大小为20的属性，宽度大约为100px，尽管在不同的浏览器和操作系统中可能会有所不同。

在父元素中，您设置了min-width:15px;，但该值比100px要小得多，因此没有任何效果。如果您将其更改为width:15px;或max-width:15px;，则会看到差异。

或者，您可以将size属性设置为非常小的值，例如size="1"。

- Stickers

---

点赞 size="1"。这是我从未见过的东西，但对于将输入缩小到较小的宽度非常有帮助（虽然是个特殊情况，但有时确实需要）。 - Ryan

size="1" 应该成为任何灵活组件开发的标准“重置”参数。在我应用 size=1 之前，这个“秘密”的最小宽度（除了显式宽度以外）是一个巨大的痛点，无法通过 CSS 摆脱。谢谢！ - Ciabaros

注意：size="0"无效，据我所知没有办法完全删除它，因此不可能比size="1"更小。 - Micah Zoltu

Answer 2

您已经设置了min-width，但没有设置max-width。

教科书有一个由浏览器设置的默认大小。该默认大小大于min-width，因此浏览器和CSS都很高兴让该默认宽度生效并增加容器的宽度。

通过为容器设置max-width或width，容器和输入框的大小将受到限制，并且它们的大小将相应计算。

.main{
  position:absolute;
  border:1px solid black;
  min-width:14px;
  max-width:140px; // What do you want here?
}

我认为这也是@sdcr所回答的，他还向您提供了有关默认大小和计算的详细信息。

- Myst

Answer 3

将你的 CSS 宽度改为 155 像素

.input{  
  width:155px;  //Replace 100% to 155px
 box-sizing:border-box;
 }

- user3386779

---

我需要 .input 的宽度为 100％，目前我正在使用一个 JavaScript 解决方案来隐藏输入框，获取 .main 的宽度并设置 .input 的宽度；我想知道是否有我错过的某些 CSS 规则。 - Omu

Answer 4

你可能不会认为这样会起作用，但是设置width: 0确实可以使输入元素完全缩小，前提是它在flexbox内部。如果flex设置大于0，则元素本身的实际宽度不会为0。

- Marko Grdinić

Answer 5

.main 容器跨越内容的宽度，只有当你将屏幕调整为小尺寸时，你才会看到 input 实际上比默认输入宽度更小地适合其中。如果你改变 .main 内容的 width，你会发现在大屏幕上，input 的默认 width 也会随之改变，并缩小至不小于 min-width 值。

.main{
  position:absolute;
  border:1px solid black;
  width: 75px;
  min-width:15px;  
}

http://jsbin.com/xeyupinaja/3/edit

- Konstantin Dinev