当前位置: 首页 > article >正文

div中使用placeholder

使用CSS实现divplaceholder效果

使用:empty伪类和content属性‌:可以通过CSS的:empty伪类和content属性来实现。当div为空时,使用:before伪元素显示提示文本。例如:

HTML部分:

<div contenteditable="true" data-placeholder="请输入内容..." class="send-content"></div>

CSS部分:

.send-content{
    position:relative;
    outline:none;
    z-index:1;
    &:empty::before{
        position:relative;
        color:lightgray;
        content:attr(data-placeholder);
        z-index:-1;
    }
}


http://www.kler.cn/a/591101.html

相关文章:

  • Ajax原理笔记
  • 基于SpringBoot+Vue的幼儿园管理系统+LW示例参考
  • JavaScript基础-获取元素
  • 基于大模型的慢性鼻窦炎全周期预测与治疗方案研究报告
  • react-native 踩坑
  • DIFY整合VideoLLaMA3使用图片理解
  • 远程访问家里电脑上部署的Stable diffusion - 免费篇
  • 部队仓储信息化手段建设:基于RFID、IWMS、RCS三大技术的仓储物流全链路效能优化方案
  • 设计模式(创建型)-抽象工厂模式
  • 【Pandas】pandas Series sparse
  • Spring boot 整合 ehcache 2.x 3.x -本地缓存以及持久化实现
  • 供应链精读:106页华为智慧供应链ISC项目建设IT蓝图规划设计方案
  • Go语言对于MySQL的基本操作
  • Linux--进程优先级
  • 如何设计一个短链系统?流程如何?
  • 云原生周刊丨CIO 洞察:Kubernetes 解锁 AI 新纪元
  • TypeScript Symbols 深度解析:在 Vue3 中的高级应用实践
  • Lora微LLAMA模型实战
  • 【Node.js入门笔记8---path 模块】
  • 如何使用 CryptoJS 实现 DES 解密