html – 文本输入上显示的溢出,是可能吗？

发布时间：2020-12-14 21:32:53 所属栏目：资源来源：网络整理

导读：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和y的底部可见(不

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和y的底部可见(不增加文本输入的高度)？

感谢任何帮助。

解决方法

以下是Webkit和Firefox的解决方案：

(这不会在IE中工作 – 因为it doesn’t support outline-offset)

1)移除高度

2)使用轮廓而不是边框

3)添加负轮廓偏移

4)添加填充以微调偏移

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!