【问题标题】:textarea with fixed inner placeholder具有固定内部占位符的文本区域
【发布时间】:2023-03-05 02:42:01
【问题描述】:

我正在尝试创建一个在左上角具有固定标题的文本区域。到目前为止,我有以下内容:

<div style="position: relative">
    <div style="position:absolute; top:3px; left:3px; font-size:9px; line-height:10px">My Notes:</div>
    <textarea rows="9" style="padding-top:12px"></textarea>
</div>

问题是,如果 textarea 包含足够多的可滚动文本,则 textarea 中的文本将与标题重叠。

是否可以通过一种固定的顶部填充来避免这种情况?

【问题讨论】:

    标签: css textarea padding fixed


    【解决方案1】:

    除非禁用滚动功能,否则无法使用 CSS 阻止它向后滚动。为了让它看起来更好,只需添加更多的 CSS,最重要的是,background。将 width 设置为 100% 并添加一些 padding 使其适合。最后,top: 1px,所以您仍然可以看到表单的顶部边框。

    position:absolute; 
    top:1px; 
    left:3px; 
    font-size:9px; 
    line-height:10px;
    background: #fff;
    width: 100%;
    padding: 5px;
    

    【讨论】:

    • 我真的不想滚动到后面...更多的是向下推动滚动条以保持上部不变。这可能吗?
    • 滚动条是在shadow DOM中构建的,要做到这一点需要付出很大的努力,更不用说跨浏览器的兼容性了。我不确定这是否可行,但您也可以默认使用 Javascript 将内容向下移动 50 像素。
    猜你喜欢
    • 2011-05-09
    • 2013-07-07
    • 2016-04-09
    • 2015-06-05
    • 2011-06-28
    • 2017-10-03
    • 2015-10-25
    • 2021-10-31
    • 2012-02-06
    相关资源
    最近更新 更多