微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Mip是什么意思以及作用有哪些
怎么测试Mip页面运行情况
MIP安装的具体步骤有哪些
HTML添加超链接、锚点的方法及作用详解(附视频)
MIP的规则有哪些
Mip轮播图组件中的重要属性讲解
Mip的内联框架组件是什么
怎么创建初始的MIP配置及模板文件
HTML实现多选框及无法提交多数据的原因分析(附视频)
HTML如何设置复选框、单选框以及默认选项?(图文+视频)