文本输入上可见溢出，这可能吗？

Question

CSS overflow:visible 似乎没有应用于输入。

请参阅以下 JS 小提琴： https ://jsfiddle.net/b4sr578j/

 input {
  border: 1px dashed black;
  overflow: visible;
  height: 28px;
  font-size: 30px;
}

 <input type='text' value='gggyyyXXX'/>

是否可以使 gs 和 ys 的底部可见（不增加文本输入的高度）？

谢谢你的帮助。

原文由 Chris 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

对原始问题的回答 - 正如 Sebastian Hens 已经指出的那样，这是 不可能的。原因是因为 input 元素是 替换元素， 溢出属性只适用于非替换元素。

来自 MDN 关于 溢出 属性的引用：

适用于- 非替换块级元素和非替换行内块元素

正如评论中已经提到的，理想的解决方案是使用 contenteditable 元素，因为它们确实尊重 overflow 设置。

---

这是一个变通解决方案，它使用多个 linear-gradient 来生成虚线边框效果。部分答案取自 Danield 的答案（关于 padding 和删除 height 的部分）。最重要的是，我修改了 appearance 并添加了渐变。

虽然我们没有明确添加高度，但边框内区域的实际高度仍将与原始代码中的高度相同。我在左侧添加了一个带有您的原始代码的输入框以进行比较。不知道你能不能接受。如果您强制性地希望设置 height 那么这将不起作用。

 input.test {
  appearance: none;
  box-sizing: border-box;
  font-size: 30px;
  padding: 2px 0px 6px;
  border: 0;
  background: linear-gradient(to right, gray 50%, transparent 50%), linear-gradient(to right, gray 50%, transparent 50%), linear-gradient(to bottom, gray 50%, transparent 50%), linear-gradient(to bottom, gray 50%, transparent 50%);
  background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-position: 0px 0px, 0px 1em, 0px 0px, 100% 0px;
  box-shadow: inset 0px -10px 0px white;
  width: 200px;
}
input.original {
  border: 1px dashed black;
  overflow: visible;
  height: 28px;
  font-size: 30px;
  width: 200px;
}

input{
  vertical-align: top;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<input type='text' value='gggyyyXXX' class='original' />
<input type='text' value='gggyyyXXX' class='test' />

在上面的代码片段中，白色 box-shadow 用于隐藏渐变的底部，使其不会溢出（您可以通过删除 box-shadow 来查看效果）并且由于这需要纯色背景。另一方面，如果你的文本框的高度是固定的，那么你可以使用类似下面的代码片段来支持非纯色背景。

 input.original {
  border: 1px dashed black;
  overflow: visible;
  height: 28px;
  font-size: 30px;
  width: 200px;
}
input.test-fixedheight {
  appearance: none;
  box-sizing: border-box;
  font-size: 30px;
  padding: 2px 0px 6px;
  border: 0;
  background: linear-gradient(to right, crimson 50%, transparent 50%), linear-gradient(to right, crimson 50%, transparent 50%), linear-gradient(to bottom, crimson 12.5%, transparent 12.5%, transparent 25%, crimson 25%, crimson 37.5%, transparent 37.5%, transparent 50%, crimson 50%, crimson 62.5%, transparent 62.5%, transparent 75%, crimson 75%, crimson 87.5%, transparent 87.5%), linear-gradient(to bottom, crimson 12.5%, transparent 12.5%, transparent 25%, crimson 25%, crimson 37.5%, transparent 37.5%, transparent 50%, crimson 50%, crimson 62.5%, transparent 62.5%, transparent 75%, crimson 75%, crimson 87.5%, transparent 87.5%),linear-gradient(to bottom, transparent 0%, white 0%);
  background-size: 8px 1px, 8px 1px, 1px 1em, 1px 1em, 100% 1em;
  background-repeat: repeat-x, repeat-x, no-repeat, no-repeat;
  background-position: 0px 0px, 0px 29px, 0px 2px, 100% 2px;
  width: 200px;
}
input.test-fixedheight-transparent {
  appearance: none;
  box-sizing: border-box;
  font-size: 30px;
  padding: 2px 0px 6px;
  border: 0;
  background: linear-gradient(to right, beige 50%, transparent 50%), linear-gradient(to right, beige 50%, transparent 50%), linear-gradient(to bottom, beige 12.5%, transparent 12.5%, transparent 25%, beige 25%, beige 37.5%, transparent 37.5%, transparent 50%, crimson 50%, beige 62.5%, transparent 62.5%, transparent 75%, beige 75%, beige 87.5%, transparent 87.5%), linear-gradient(to bottom, beige 12.5%, transparent 12.5%, transparent 25%, beige 25%, beige 37.5%, transparent 37.5%, transparent 50%, beige 50%, beige 62.5%, transparent 62.5%, transparent 75%, beige 75%, beige 87.5%, transparent 87.5%);
  background-size: 8px 1px, 8px 1px, 1px 1em, 1px 1em;
  background-repeat: repeat-x, repeat-x, no-repeat, no-repeat;
  background-position: 0px 0px, 0px 29px, 0px 2px, 100% 2px;
  width: 200px;
}

/* Just for demo */

body{
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

input{
  vertical-align: top;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<input type='text' value='gggyyyXXX' class='original' />
<input type='text' value='gggyyyXXX' class='test-fixedheight' />
<input type='text' value='gggyyyXXX' class='test-fixedheight-transparent' />

这种方法 在 Chrome、Firefox、Opera 和 IE11 中进行了测试。因为 IE10 支持渐变，所以它应该也能正常工作，但不适用于任何较低版本，因为它们不支持渐变。

原文由 Harry 发布，翻译遵循 CC BY-SA 3.0 许可协议