手把手教你如何实现让一个div具有input框的效果

Orange小白之路

码龄5年

关注

原创最新推荐文章于 2026-03-26 09:48:14 发布 3.1k 阅读

PCIe 6.0实战指南：从链路训练到信号完整性的避坑手册本文是一份针对PCIe 6.0硬件工程师的实战避坑指南。文章深入解析了从NRZ到PAM4调制带来的信号完整性挑战，详细拆解了链路训练（LTSSM）的复杂过程与调试方法，并提供了从信道仿真到实验室实测（如使用Keysight示波器进行眼图与误码率分析）的完整信号完整性闭环验证策略，帮助工程师解决高速率下的链路不稳定与降速问题。阅读详情

一.只需要在div上添加contenteditable或者contenteditable="true"（二选一）

<div contenteditable>这是一个input框</div>
<div contenteditable="true">这也是一个input框</div>

二.设置input样式（根据个人需求设置）

    <style>
        div {
            width: 200px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #000;
            padding: 5px;
            margin-top: 10px;
        }
    </style>

三.打开浏览器查看就可以实现了在div里面输入文本啦

四.如果需要去掉input聚焦时候的外边框，可在style样式中添加如下代码

 /* 去掉input聚焦时候的外边框 */
        [contenteditable]:focus {
            outline: none;
        }

标签

#前端 #css

本内容遵循 CC 4.0 BY-SA 版权协议

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

PotPlayer终极画质调校：深入MadVR渲染器设置，让你的显示器发挥100%潜力本文深入探讨了如何通过MadVR渲染器优化PotPlayer的画质设置，充分发挥高端显卡和显示器的潜力。从色彩空间匹配、色深优化到HDR元数据处理，提供了一套完整的配置指南，帮助用户实现影院级视觉体验。特别适合拥有NVIDIA RTX或AMD RX系列显卡的用户进行精细调校。阅读详情

0

Orange小白之路

博客等级

码龄5年 94粉丝 17原创

+ 关注

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。