可以在文本输入上看到溢出吗？

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的底部可见（不增加文本输入的高度）？

感谢您的帮助。

Answer 1

这是Webkit和Firefox的解决方案：

（这在IE中不起作用 - 因为it doesn't support outline-offset）

1）移除高度

2）使用outline代替border

3）添加否定outline-offset

4）添加padding以微调偏移量

FIDDLE

＆＃13;

＆＃13;

input {
  overflow: visible;
  font-size: 30px;
  outline: 1px dashed black;
  border: 0;
  outline-offset: -8px;
  padding: 6px 0 2px 8px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

简而言之：不，这是不可能的！ 你唯一能做的就是为输入创建一个javascript / html / css替换。但这将是一个开销。

想出一个主意：

• 将输入设置为隐藏可见性
• 使用输入
下的“输入样式”定位DIV
• 让javascript检查用户是否在按下输入时将输入值复制到div

Answer 3

对原始问题的回答 - 如Sebastian Hens所说，这是不可能。原因是因为input元素是replaced elements和overflow property applies only to non-replaced elements。

  

从MDN引用溢出属性：

     

适用于 - 未替换的块级元素和未替换的内联块元素

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

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

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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' />

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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' />

＆＃13;

＆＃13;

＆＃13;

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

Answer 4

真的有更多的解决方法，但为什么不绝对定位没有边框的输入呢？

body {
  position:relative;
}
input {
  border: 1px dashed black;
  overflow: visible;
  height: 28px;
  font-size: 30px;
}
input.noborder {
  border:1px transparent solid;
  height:34px;
  position:absolute;
  left:0;
  background:transparent;
}

<input type='text' value=''/>
<input class="noborder" type='text' value='gggyyyXXX'/>

Answer 5

我怀疑它可以这样做。输入使用size属性。所以使用代码来操纵大小。例如。在php;

<input type="text" name="nm" size = "<?php if(strlen($text)<=10)echo 10;
 else echo strlen($text); ?>" >