Question

我需要将自动显示的滚动条添加到输入中，当有更多文字显示并使用overflow: auto;但是它不起作用并显示为overflow: hidden;。我还测试了overflow属性中的每个可能值 <input type="text">它被完全忽略，即使overflow: scroll设置为hidden也无法正常工作和显示。

chrome中的计算样式是正确的，它被 NOT 覆盖了任何东西！但是<textarea>一切正常。

这是正常行为还是我做错了什么？如果是正常行为，是否有其他方法可以设置自动滚动到输入？

更新在只有输入的空html文件中，当溢出设置为值时，它应该有滚动的位置，它有更多的高度，当它不应该时。

Answer 1

input[type=text]本身显示为inline，而textarea是块级元素，显示为inline-block。 overflow applies to block level elements

正如评论者指出的那样，Firefox本身display的输入文本元素为inline。因此，要覆盖该行为，请将block或inline-block应用于所述输入元素。

Answer 2

虽然@xandercoded为您提供正确答案，但我想提供一个解决方案＆＃34;或解决方法，以实现我认为OP正在尝试做的事情。

据我所知，您无法在输入字段上设置滚动条。但我们可以在某些方面伪造它。我们可以做的是使用javascript使输入自动增长，然后将其放在具有overflow:auto的容器中。我给你举个例子：

HTML：

  <div id="input-container">
    <input id="input" type="text"/>
  </div>

CSS：

#input
{
  border: none; /* remove the border so we fake it better */
  outline: none; /* remove the outline so we fake it better */
}    
#input-container
{
  width: 200px;
  overflow: auto;  
}

JS：

$('#input').autoGrowInput({ minWidth: 180, comfortZone: 10 });

对于js部分，我们使用jQuery和autoGrowInput jquery插件。

我用这个做了jsFiddle。

Html输入完全忽略溢出属性

2 个答案:

HTML：

CSS：

JS：