文本输入上可见溢出,有可能吗?
Posted
技术标签:
【中文标题】文本输入上可见溢出,有可能吗?【英文标题】:Overflow visible on text input, is it possible? 【发布时间】:2015-08-24 03:24:08 【问题描述】:CSS overflow:visible
似乎没有应用于输入。
参见下面的 JS fiddle:https://jsfiddle.net/b4sr578j/
input
border: 1px dashed black;
overflow: visible;
height: 28px;
font-size: 30px;
<input type='text' value='gggyyyXXX'/>
是否可以让 gs 和 ys 的底部可见(不增加文本输入的高度)?
感谢您的帮助。
【问题讨论】:
不,我想要单行文本输入,我只想让字母的底部在边框下方可见。 字体大小大于输入高度的示例以查看问题:jsfiddle.net/b4sr578j/11 据我所知,这是不可能的。此外,其他一些东西不适用于输入元素,例如:before
和:after
。如果你去-webkit-appearance: none;
,它甚至不起作用,这应该使它像任何内联块元素一样。
带有contentEditable
的元素如何避开这一点也很有趣:codepen.io/anon/pen/zGwbOq 聚焦元素并查看轮廓(在 chrome 中)。
@Nico O:这确实很有趣。大概是因为contenteditable
并没有从根本上改变元素的渲染方式。它只允许您使用插入符号在现场编辑其内容,就像您如何使用 Web 检查器更改元素的内容一样。作为替换元素,输入元素的行为不一定像传统的 CSS 非替换框,因此可能有自己的渲染规则,例如内容区域的任意裁剪。
【参考方案1】:
这里是 Webkit 和 Firefox 的解决方案:
(这在 IE 中不起作用 - 因为 it doesn't support outline-offset)
1) 移除高度
2) 使用outline
而不是border
3) 添加否定的outline-offset
4) 添加padding
微调偏移量
FIDDLE
input
overflow: visible;
font-size: 30px;
outline: 1px dashed black;
border: 0;
outline-offset: -8px;
padding: 6px 0 2px 8px;
<input type='text' value='gggyyyXXX' />
【讨论】:
现在g
s 和y
s 的底部是不可见的(Firefox)。
这种填充技术仅适用于 Chrome。在 Firefox 和 IE 上(顺便说一下,它们也不支持轮廓偏移),被剪裁的是内容框 - 填充只是将内容与边框边缘隔开,实际上并不会增加内容区域。
我没听懂.. 我们可以使用 contenteditable div 来解决这个问题。对吗?
@Mr_Green OP 在 cmets 中指出他不想使用 contenteditable 的问题
是的 contenteditable 支持富文本、图像、换行符等——我不希望这样。看起来我的选择是使用带有大量 JS 的 contenteditable 进行消毒,或者只是接受我需要更高的固定高度。我想我现在倾向于后者。【参考方案2】:
回答原始问题 - 正如 Sebastian Hens 已经指出的那样,这是不可能。原因是因为input
元素是replaced elements 和overflow property applies only to non-replaced elements。
来自 MDN 关于 overflow 属性的引用:
适用于 - 不可替换的块级元素和不可替换的行内块元素
正如 cmets 中已经提到的,理想的解决方案是使用 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' />
在上面的 sn-p 中,一个白色的box-shadow
用于隐藏渐变的底部,使其不会溢出(您可以通过删除box-shadow
来查看效果),因此它需要纯色背景。另一方面,如果你的文本框的高度是固定的,那么你可以使用类似下面的 sn-p 来支持非纯色背景。
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 支持渐变,所以它也应该可以正常工作,但不适用于任何低版本,因为它们不支持渐变。
【讨论】:
【参考方案3】:简而言之:不,这是不可能的! 您唯一能做的就是为输入创建一个 javascript/html/css 替换。但这将是一个开销。
得到一个想法:
将输入设置为隐藏可见性 在输入下放置一个带有“输入样式”的 DIV 让 javascript 检查用户是否在聚焦输入时进行按键操作,并将输入值复制到 div【讨论】:
【参考方案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'/>
【讨论】:
【参考方案5】:我怀疑它可以这样做。输入为此使用size
属性。所以操纵大小,使用代码。例如。在php中;
<input type="text" name="nm" size = "<?php if(strlen($text)<=10)echo 10;
else echo strlen($text); ?>" >
【讨论】:
不,这不是 size 属性的作用。 W3 学校似乎同意我的看法。 take a look W3Schools 没有说 size 属性用于控制文本输入的行高。 PHP 在哪里标记了这个问题的任何地方?size
属性也与此无关。
@Ashley Medway:不过不在这里。以上是关于文本输入上可见溢出,有可能吗?的主要内容,如果未能解决你的问题,请参考以下文章